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

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);

};

Fiddle -> 使用 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 的滚动时它会抖动，在滚动完成后设置 scrollTop 的意义是抖动，而不是在滚动时。

Answer 1

如果您将滚动值数字四舍五入为整数，那么这个问题就会消失：

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

我只是使用了一个舍入函数：

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

这似乎已经解决了。双值确实混淆了滚动条和 2D 绘图等 GUI 小部件。

Answer 2

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

我刚刚在滚动函数的底部添加了以下行.. other.scrollTop = getsscrollTop(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 上进行了测试，两个滚动都很好地同步。