Question

Here is what I've been working with.一切都运行得很好，除非你向下滚动一下，当你向下滚动时，你会看到对齐越来越多。 #left div应该通过.css('top')移动与#right div的scrollTop()相同的距离，但随着时间的推移，这个框架会在包含div#innerScroller的地方爬行。 }。

如果你比较青蛙最初排队的地方，第二次出现排队的位置，你就会看到我的问题。

不要担心把手的东西......相关的JS很小：

  var left = $('#left');
  var leftHeight = left.height();
  var leftTop =  0 - leftHeight + $('#right').height();
  left.css('top', leftTop + 'px');

  $('#right').on('scroll', function(){

    var scro = parseFloat($('#right').scrollTop());

    var goal = leftTop + scro;

    left.css('top', goal + 'px');

  });

谢谢！

修改

只是说它，这是有效的，但非常hackey，而不是我正在寻找的那种解决方案：

var scro = (parseFloat($('#right').scrollTop())) * 1.062;

Answer 1

你实际上有两个问题。

第一个问题是左侧的所有<p>标记。请参阅此答案：remove space above and below <p> tag HTML

最简单的CSS修复方法是：

p {
    margin: 0;
    padding: 0;
}

在此修复之后，双方排列得更紧密，但仍略微偏移。查看控制台输出，右侧仍然可以滚动4个像素太远。这是Ignore whitespace in HTML的常见问题。如果你添加：

#right {
    font-size: 0;
}

额外的空间消失了，一切都完美排列！

为什么我的视差滚动了一点？

1 个答案: