应用修改后的滚动方向后移动设备上的滚动延迟

Question

我创建了一个负责反转滚动方向的简单函数，但该功能似乎是 cpu 沉重的，这导致了移动设备上的延迟 - 我的假设。

起初，我以为它必须是这样，我无法优化它，直到我发现具有类似功能但完全没有延迟的网站。我在这个问题中发现了这一点：Modify scroll direction

这是问题中网站的链接：http://buero-buero.org/

显然他们正在使用这个：

<script>
function crisscross() {
$('down-left').style.bottom = '-' + window.scrollY + 'px';
$('down-right').style.bottom = '-' + window.scrollY + 'px';
$('left').style.left = '-' + window.scrollY + 'px';
$('right').style.right = '-' + window.scrollY + 'px';
}
</script> 

这是我手机上的样子：

正如您所见，它非常流畅，尽管我已将 fps 降低到适合 gif 的 2MB 限制。

我的函数是这样的：

$(".wrap-work-right").css("bottom", window.scrollY * -1);

在这两种情况下，滚动方向都是通过更改 bottom 值来控制的 - 不仅是让我们关注 bottom。

这是我的功能在我的手机上的样子：

左侧工作正常，因为它不使用任何 js。我应用函数的右侧，显然跟不上计算window.scrollY * -1。

它可能会改变，因为我一直在测试不同的选项，但这里是我网站的链接（测试版）：http://mateuszkusz.com/ — 我仍在努力。由于我是初学者，我不能保证它适用于所有浏览器。

为什么我的反向滚动方向版本这么慢？我试图用 mp4 和 png 文件替换 gif。我还试图操纵translateY 而不是bottom：

var shiftValue = $(window).scrollTop() * 1 + 'px';
$('.wrap-work-right').css('transform', 'translateY(' + shiftValue + ')');

除此之外，我还清除了我的 js 文件，只留下一个函数来查看 CPU 使用率是否较低，但不幸的是，延迟仍然是一个问题。也许问题出在服务器端？我正在使用可以托管。或者我的图片结构太复杂了？

我正在尝试修复此问题 2 天，但我没有想法，因此我将不胜感激任何提示。

编辑： 作为实验，我删除了 js 文件和索引之间的连接。我决定测试纯 JavaScript：

<script>
window.onscroll = function() {
document.getElementsByClassName("wrap-work-right")[0].style.bottom = '-' + window.scrollY + 'px';
}
</script>

似乎效果更好，但只有当 gif 不在视野范围内时。我将不得不做更多的测试。

编辑：这是我的反向滚动功能的jsfiddle（简化版）：

$(window).on("scroll resize", function(){

  $(".right").css("bottom", window.scrollY * -1);

});

* {
  margin: 0;
  padding: 0;
}
body {
  height: 100%;
  width: 100%;
}
.break-off {
  position: relative;
  float: left;
  width: 100%;	
}
.break-screen {
  height: calc(100vh - 48px);
}
.break-shot {
  height: 16px;
}
.wrapp {
  position: fixed;
  width: calc(100% - 48px); 
  left: 24px;
  top: 0px;
  height: 100vh;
}
.absolute {
  position: absolute;
}
.left {
  position: absolute;
  top: 0px;
  width: calc(50% - 8px);
  left: 0px;
}
.right {
  position: absolute;
  bottom: 0px;
  width: calc(50% - 8px);
  right: 0px;
}
.shot {
  float: left;
  position: relative;
  width: 100%;
  height: 400px;
  background-color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapp absolute">
  <div class="left">
    <div class="break-off break-screen"></div>
    <div class="shot"></div>
    <div class="break-off break-shot"></div>
    <div class="shot"></div>
    <div class="break-off break-screen"></div>
  </div>
</div>
<div class="wrapp">
  <div class="right">
    <div class="shot"></div>
    <div class="break-off break-shot"></div>
    <div class="shot"></div>
    <div class="break-off break-screen"></div>
  </div>
</div>

过去我只有一个位置固定的包装器。我使用 jquery 来获取左侧容器的高度，然后将其应用到主体以能够滚动，但在这种情况下，我的左侧和右侧同时滞后。

Answer 1

经过额外一天的研究和测试，我确定是什么导致我的画廊在移动设备上滚动页面时滞后（仅在横向模式下，当画廊分为两列并且右侧使用 js 时）。请记住，我的手机不是市场上最快的设备，事实上我使用 Nexus 4 进行测试，非常旧的型号。

直截了当：Chrome (2012 - 2016) 中显然存在一个错误，即浏览器无法正确且动态地处理缩小高分辨率图像，从而导致滚动时出现大量延迟。

来源：https://bugs.chromium.org/p/chromium/issues/detail?id=92812

我不知道这个错误是否仍然存在，但我想可以肯定地假设滚动时的 UX 将取决于您设备的计算能力。在将一些随机的低分辨率图像上传到我的网站后，我能够确认这一点。滞后不再是问题。看看吧：

如您所见，即使是快速滚动也不会滞后。我知道我在整个页面上都使用了完全相同的图像，但是在以高分辨率测试相同的图像时，滚动延迟立即很明显。

另一个论点是http://buero-buero.org/ 没有完全响应。他们使用的是 1:1 图片，无论如何，页面不会缩小。这可以解释为什么 buero 上的滚动更加流畅，即使他们使用更复杂和更重的多媒体以及修改的滚动方向。

这是关键：缩小高分辨率图像。现在看，我知道在使用低分辨率图像进行测试期间，它们仍在缩放以适应容器，（因为我没有费心计算图像的大小以防止缩放）但是操作的规模很大更低，让我的石器时代手机能够正确处理滚动。

最后当然是 javascript 函数（在 window.onscroll 事件中调用），它仅与缩小高分辨率图像相结合，可能会产生滚动延迟 - 取决于您设备的计算能力。

总结：造成延迟的不是修改后的滚动方向。是缩小后的js和高分辨率图片的组合。

由于我想使用高分辨率图像，我想我会在 1024px 上触发断点，这样在移动设备上查看我网站的人就不会遇到滚动延迟。