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

Posted 2023-05-08

【中文标题】在 iOS 中同步两个 div 滚动不流畅

【英文标题】：synchronising two divs scroll is not smooth in iOS

【发布时间】：2014-09-15 22:28:42

【问题描述】：

--> 请转到编辑此问题的部分

我想同步两个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 的意义是抖动，而不是在滚动时。

【问题讨论】：

也许这会对你有所帮助***.com/questions/17722497/…

我注意到的一件事是在第 17 行，您正在调用一个函数“getscrollTop(node)”，该函数已经作为一个变量 scrollTop。此外，您将“oscrollTop”声明为变量，然后在函数的最后直接将其分配给对象……只需将其直接分配给对象即可。如果您担心低端设备的性能，那么代码优化非常重要。

@lordkain 最好的解决方案是什么。第一个解决方案似乎是在代码中进行大量计算。

【参考方案1】：

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

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

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

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

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

【讨论】：

感谢您的建议。但是我刚刚删除了滚动处理程序并使用了 20 秒的 setInterval 来同步两个 DIV 的滚动位置，现在它非常流畅。编辑：我还添加了您的建议:) 我可以了解更多关于舍入整数背后的原因吗？

我认为这与滚动组件的内部舍入有关。我自己也不确定。此外，如果您减少事件（就像您所做的那样），这是一种不会压倒组件的方式。

【参考方案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 上进行了测试，两个滚动都很好地同步。

【讨论】：

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

嗨@redV，我相信滚动高度值是相对于它的滚动而取的，当这个值被传递给另一个滚动时，它看起来就像这个值实际上是从另一个滚动中获取的，因此无论高度如何，每个滚动都将根据传递的值滚动相同的高度。因此它仍然会同步两个滚动。

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