同步两个div滚动在iOS中并不流畅

Question

- >请转到编辑本课题的部分内容

我想同步两个div的滚动条,这就是我这样做的方式

 var div1 = document.getElementById('element1'),
    div2 = document.getElementById('element2');

div1.addEventListener('touchmove', scrolled, false);
div2.addEventListener('touchmove', scrolled, false);

function getscrollTop(node) {
    return node.pageYOffset || node.scrollTop;
}

function scrolled() {

    var node = this, scrollTop = getscrollTop(node);

    var percentage = scrollTop / (node.scrollHeight - node.clientHeight);

    var other = document.getElementById({
        "element1": "element2",
        "element2": "element1"
    }[node.id]);

    other.scrollTop = percentage * (other.scrollHeight - other.clientHeight);

};

小提琴 - >用来scroll代替touchmove

但问题是它在低端设备中是闪烁的,并且希望在低端设备中使其平滑.

编辑

我使用下面的代码来平滑滚动

var children = document.querySelectorAll('.scrolldiv');

var getscrollTop = function(node) {
   return node.pageYOffset || node.scrollTop;
}, toInt = function(n) {
   return Math.round(Number(n));
};

window.setInterval(function() {
  var scrollTop = getscrollTop(children[0]);
  var percentage = scrollTop / (children[0].scrollHeight - children[0].clientHeight);
  var oscrollTop = percentage * (children[1].scrollHeight - children[1].clientHeight);
  // console.log(1);
  children[1].scrollTop = toInt(oscrollTop);
}, 2);

在桌面浏览器中它更流畅,但在iOS浏览器中,当设置第二个DIv的滚动时,它是抽搐,在滚动完成后在滚动条中滚动,而不是在滚动时.

Answer 1

如果将滚动值数字舍入为整数,则此问题就会消失:

http://jsfiddle.net/2Cj4S/15/

我刚刚使用了舍入函数:

function toInt(n){ return Math.round(Number(n)); };

这似乎解决了它.双值确实混淆了GUI小部件,如滚动条和2D绘图.

Answer 2

我不明白为什么你必须在这里计算一个新的百分比，即你交给第二个滚动的值..这可能是抽动的原因..相反，你可以简单地从第一个滚动中获取滚动值并分配它直接到另一个卷轴..这将消除另一个卷轴中的不稳定性..并同步它们..

我刚刚将以下行添加到滚动函数的底部。 other.scrollTop = getscrollTop(node);

修改后的功能：-

函数滚动（）{

var node = this,
    scrollTop = getscrollTop(node);

var id = node.id;

var percentage = getscrollTop(node) / (node.scrollHeight - node.clientHeight);

var other = document.getElementById({
    "element1": "element2",
    "element2": "element1"
}[id]);

var oscrollTop = percentage * (other.scrollHeight - other.clientHeight)

//other.scrollTop = oscrollTop;
//Please note that I have commented out the above line.. and added the following line
other.scrollTop = getscrollTop(node);

};

我希望这是你所希望的行为，我在 jsfiddle 上测试了它，两个卷轴都同步得很好。