应用修改后的滚动方向后，移动设备上的滚动滞后

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

我不知道这个bug是否仍然存在，但我想可以安全地假设在滚动时UX会取决于你的设备的计算能力。在将一些随机低分辨率图像上传到我的网站后，我确认了这一点。滞后不再是一件事。看看：

正如您所看到的，即使快速滚动也不会滞后。我知道我在整个页面上都使用了完全相同的图像，但是在高rez中测试相同的图像时，滚动延迟立即变得明显。

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

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

最后一件事当然是javascript函数（在window.onscroll事件上调用），它只与向下缩放高rez图像结合使用，可能会产生滚动延迟 - 取决于设备的计算能力。

摘要：这不是修改后的滚动方向。它是按比例缩小的js和高分辨率图像的组合。

由于我想使用高rez图像，我想我只会在1024px上触发断点，以便在移动设备上查看我的网站的人不会遇到滚动延迟。