1

这是我一直在使用的。一切都很好，除了如果你向下滚动一点，当你向下滚动时，你会看到对齐越来越偏离。#leftdiv 应该移动与div.css('top')相同的距离，但随着时间的推移，盒子相交的地方会爬上包含的.#rightscrollTop()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');
    
  });

谢谢！

编辑：

只是说，这行得通，但是非常老套，而不是我正在寻找的那种解决方案：

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

4

1 回答 1

2

你实际上有两个问题。

第一个问题是<p>左侧的所有标签。请参阅此答案：删除 <p> 标签 HTML 上方和下方的空格

最简单的 CSS 修复将是：

p {
    margin: 0;
    padding: 0;
}

在此修复后，两侧排列更加紧密，但仍略微偏移。查看控制台输出，右侧仍然可以滚动 4 个像素。这是在 HTML 中忽略空格的常见问题。如果添加：

#right {
    font-size: 0;
}

多余的空间消失了，一切都完美排列！

于 2013-09-03T21:09:56.347 回答