javascript - scrollTop 不一致时(缩放 < 1)

Question

这是我的第一个 SO 问题，所以请原谅任何失礼的问题!

我的 HTML DOM 上有两个 float :左的容器。每个都有必须与另一个完全对齐的内容。左侧容器 (A) 具有 overflow-y:hidden，而右侧容器 (B) 具有 overflow-y:scroll。我使用 onscroll 回调来设置容器 A 的滚动位置，如下所示:

    A.scrollTop = B.scrollTop;

这在 99% 的用例中都非常有效……直到客户端缩放到 100% 以下。当缩放低于此级别时，一个容器中的行有时会与另一个容器中的行相差 1 个像素。我的第一个猜测是这是一个舍入问题，但我不知道在哪里可以找到可用于构建算法以预测错误何时以及如何发生的值。此外，两个容器的高度完全相同，并且它们的内容也具有相同的高度，因此我希望它们中的每一个的任何舍入误差都相同!

I've created a jsFiddle demonstrating the behavior here . (我在这个例子中使用了 div，但其他元素表现出相同的行为)(我在 chrome 中测试)

谁能解释为什么这两个容器在将 scrollTop 设置为相同值时表现出不同的行为？另外，鉴于浏览器缩放检测充其量是困难的 (discussion here) 有谁知道识别和纠正此问题的有效方法吗？

Answer 1

看起来像是缩放问题，不确定。强制 scrollTop 可能会有所帮助。 JSFiddle demo here .

$('#b').on('scroll', function () {
    var top = $(this).scrollTop();

    if (top != $('#a').scrollTop()) {
        $('#a').scrollTop(top); 
        $(this).scrollTop(top);
    } 
});