Question

这是我的第一个问题，所以请原谅任何问题！

我的HTML DOM上有两个容器浮动：左。每个内容都必须与另一个内容完美对齐。左侧容器（A）有溢出-y：隐藏，而右侧容器（B）有溢出-y：滚动。我使用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);
    } 
});

Answer 2

更新：我刚刚重新审视了这个问题，看看Chrome对这个数据点的处理是否有任何变化......瞧，Chrome现在为scrollTop返回一个浮点值！

问题解决了！

（缩放＆lt; 1）时scrollTop不一致

2 个答案: