同步两个div滚动不顺畅iOS中

我想同步两个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);

设置第二个div时的滚动它催人泪下，在急拉它在桌面浏览器，但在iOS的浏览器，更顺畅一旦滚动完成，感觉设置scrollTop而不是滚动。

来源

2014-07-24 Exception

也许这会帮助你http://stackoverflow.com/questions/17722497/scroll-smoothly-to-specific-element-on-page – lordkain

我注意到的一件事是在第17行，你正在调用一个函数“getscrollTop （节点）“，你已经有了一个变量scrollTop。此外，你声明“oscrollTop”作为变量，然后直接将它分配给函数最后的一个对象......直接将其分配给对象。如果您担心低端设备的性能，代码优化非常重要。 – Michael

@迈克尔感谢:) – Exception

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

我刚刚添加了以下行到您的滚动功能的底部.. 其他.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上测试了它，两个卷轴都很好地同步。

来源

2014-08-28 12:21:01

您的解决方案将失败如果两个元素有不同的滚动高度 – redV

@redV您好，我相信滚动高度值取相对于它的滚动，并为这个值传递给其他滚动它，使它看起来像实际上是在获取的值从另一个涡旋，所以不管高度，每个滚动将滚动基于它被传递该值相同的高度..因此它仍将同步两个滚动。 –

是的，你是对的。我认为不需要计算百分比:) – redV

如果你圆你的滚动值的数字为整数那么这个问题就会消失：

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

我只是用一个舍入函数：

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

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

来源

2014-07-24 13:42:23

感谢您的建议。但我只是删除滚动处理程序，并使用setInterval的20秒，两者同步的DIV的滚动位置，现在是相当顺利。编辑：同时，我加入您的建议:)我想知道更多关于什么是背后的整数四舍五入的原因？ – Exception

我认为这是与滚动元件的内圆。我不确定我自己。此外，如果你减少事件（就像你做的那样），这是一种不会压倒组件的方式。 –

同步两个div滚动不顺畅iOS中

回答

相关问题