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

Question

我创建了一个简单的函数，负责倒转滚动方向，但它看起来像cpu很重，导致移动设备上的延迟 - 我的假设。首先，我认为它必须是这样的，我没有办法优化它，直到我发现具有类似功能但没有滞后的网站。 Modify scroll direction

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

Apperently他们使用的是这样的：

<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/ - 我仍在努力。由于我是一个begginer，我不能保证它能在所有浏览器上运行。

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

比

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

其他我也明白我的js文件只留下一个功能，看看CPU使用率较低，但unfortunetaly滞后仍然是一个事。也许问题是在服务器端？我正在使用可以托管。或者，也许我的图像结构太复杂了？

我想修复这个2天，但我没有想法，所以我会感激任何提示。

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

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

它看起来像它的效果更好，但只有当gifs不在视图。我将不得不做更多的测试。

编辑：这里是我的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%; \t 
 
} 
 
.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和高分辨率图像的组合。

因为我想用高解析度的图像，我想我只会让我的断点触发的1,024像素，让人们看我的网站在移动设备上不会遇到滚动滞后。