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

Question

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

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

这里是 link 到网站的问题：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>

这是我的 phone 上的样子：

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

我的函数看起来像这样：

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

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

这是我的函数在 phone 上的样子：

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

它可能会改变，因为我一直在测试不同的选项，但这里是 link 我的网站（测试版）：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 时）。请记住，我的 phone 不是市场上最快的设备，事实上我已经使用 Nexus 4 进行测试，非常旧的型号。

重点：显然 Chrome (2012 - 2016) 中存在一个错误，浏览器无法正确动态地处理缩小高分辨率图像，导致滚动时出现大量滞后。

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

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

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

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

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

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

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

因为我想使用高清图片，所以我想我会在 1024px 上触发断点，这样在移动设备上查看我的网站的人就不会遇到滚动延迟。

Answer 2

您可以使用以下css：

@media only screen and (max-width:767px){
    html, body {
      overflow-x: hidden;
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
      scroll-behavior: smooth;
    }
}

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

Scrolling lag on mobile devices after applying modified scroll direction

mobile

jquery

scroll

lag