滞后于边缘顶部的双滚动答案

【问题标题】：Lag on dual scroll with margin top滞后于边缘顶部的双滚动
【发布时间】：2017-09-29 13:42:21
【问题描述】：

我为一个有 2 个不同高度列并且应该以不同速度一起滚动的网站制作的 jquery 函数存在问题。

在这里你可以找到小提琴： http://jsfiddle.net/w4g3rvhh/

var maxscroll = $(document).height() - $(window).height();
var projHeight = $("#projects").outerHeight( true );
var agencHeight = $("#agency").outerHeight( true );
var diffheight = projHeight - agencHeight;
$(window).scroll(function () {
  var margin = window.pageYOffset * diffheight / maxscroll;
  $("#agency").css("margin-top", margin + "px");
});

它对我来说有点好用，但多个用户都有“滞后”行为。左边有点奇怪。

我发现mac safari（有时是chrome）上出现了错误的行为

编辑：如果需要，我已经制作了遇到行为的视频：https://youtu.be/afKziooQLac

【问题讨论】：

对我来说，在 chrome 上它根本不动，而且滚动真的很慢。在 Firefox 上，它上下移动缓慢
对我来说，它在 FF v 56.0.1（64 位）和 Chrome 版本 62.0.3202.62（官方版本）（64 位）中完美运行，但 Microsoft Edge 不稳定

标签： jquery scroll multiple-columns

【解决方案1】：

在较旧的设备上，这可能是由于滚动时触发滚动事件的频率所致。它顺序触发多次，因此每秒进行多次计算。旧设备跟不上导致滞后。通常，throttling 是建议的解决方案，但要模仿“粘性”效果或并行滚动，当然不能很好地工作 - 但是，请参阅discussion in the comments。尝试将尽可能多的计算放在滚动处理程序之外，例如：

var win = $(window),
    maxscroll = $(document).height() - win.height(),
    agency = $("#agency"),
    h = ($("#projects").outerHeight(true) - agency.outerHeight(true)) / maxscroll;

win.scroll(function() {
  agency.css("margin-top", win.scrollTop() * h + "px");
});

【讨论】：

节流还不够流畅，看起来还不错吗？对于前使用 requestAnimationFrame？
@arbuthnott 也许吧。但是我想您必须对所有浏览器进行基准测试，并查看每秒切换滚动事件的次数，然后在节流中使用一个小于该值但仍然平滑的间隔。我没有时间对其进行测试，但确实 - 在企业环境中，您可以通过这种方式对其进行测试，看看什么是最好的。
如果需要，我已经为遇到的行为制作了视频：youtu.be/afKziooQLac
@Leeroy521 Firefox 处理滚动的方式与 Chrome 不同。 Firefox 可能会触发更少/更多的事件，从而导致此行为。我没有解决这个问题。

【解决方案2】：

请使用+，而不是-

var maxscroll = $(document).height() - $(window).height();
var projHeight = $("#projects").outerHeight( true );
var agencHeight = $("#agency").outerHeight( true );
var diffheight = projHeight + agencHeight;
$(window).scroll(function () {
  var margin = window.pageYOffset * diffheight / maxscroll;
  $("#agency").css("margin-top", margin + "px");
});

【讨论】：