在應用修改後的滾動方向後，在移動設備上滾動滯後

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像素，讓人們看我的網站在移動設備上不會遇到滾動滯後。