Question

- ＆GT;请转到编辑本课题的一部分

我想同步两个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 - ＆gt;使用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)); };

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

Answer 2

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

我刚刚将以下行添加到滚动功能的底部.. other.scrollTop = getscrollTop（node）;

修改后的功能： -

函数scrolled（）{

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上测试了它，两个卷轴都很好地同步。

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

2 个答案: