为什么我的视差滚动有点偏离

Why is my parallax scrolling a little off?

本文关键字：滚动 我的 视差 为什么      更新时间：2023-09-26

以下是我一直在使用的内容。一切都很好，只是如果你向下滚动一点，你会看到对齐随着向下滚动而逐渐变差。#leftdiv应该通过.css('top')移动与#rightdiv的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');
    
  });

谢谢！

编辑：

可以这么说，这很有效，但非常棘手，不是我想要的那种解决方案：

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

您实际上有两个问题。

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

最简单的CSS修复是：

p {
    margin: 0;
    padding: 0;
}

在这次修复之后，双方的排列更加紧密，但仍然略有偏移。从控制台的输出来看，右侧仍然可以滚动4个像素太远。这是HTML中忽略空白的常见问题。如果添加：

#right {
    font-size: 0;
}

多余的空间消失了，所有东西都排得很整齐！

相关文章：