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 回答