jQuery：獲取多方向滾動效果以在移動設備上工作

我正在製作一個相當簡單的效果，其中包含分爲兩部分的頁面，.left-container和.right-container。它被設計成當用戶向下滾動頁面時，左側容器的內容以典型方式滾動，右側容器的內容向下滾動。我通過將正確的容器放置在一個固定的位置，爲它分配了-61％的初始top屬性，然後應用一些代碼以便讓正確的容器「滾動」到其餘部分的相反方向頁面，與其同步（具體來說，通過將窗口當前的scrolltop值添加到正確的容器最初的負頂端位置）。下面是相關的代碼：jQuery：獲取多方向滾動效果以在移動設備上工作

HTML：

 <div class="wrapper"> 


       <div class="left-container"> 

           <!-- content here --> 

       </div> <!-- .left-container --> 


       <div class="right-container"> 

           <!-- content here --> 

       </div> <!-- .right-container --> 


     <div> <!-- .wrapper -->

CSS：

html, body { 
     width:100%; 
     height:100%; 
} 

.wrapper { 
     width:100%; 
     height:100%; 
} 

.left-container, 
.right-container { 
     width:50%; 
     height:160%; 
} 

.right-container { 
     left:50%; 
     top:-61%; 
     position:fixed; 
}

SCRIPT：

$(document).ready(function() { 

var rHeight = $(".wrapper").height(); 
var tHeight = rHeight * -0.61; 


    $(window).scroll(function(){ 
    var sTop = $(this).scrollTop(); 

     $('.right-container').css('top', tHeight + sTop); 
    }); 

});

而且HERE是有問題的網頁。在有些粗糙的情況下，但我尋找的滾動效果已經實現。

問題是，這個代碼在手機上表現不佳，我認爲這是因爲.scroll()事件只有在touch完全執行後纔會觸發。因此，正確的容器不會平滑滾動，而是保持固定，直到用戶擡起手指，此時右側容器會簡單地卡入其最終位置。

我想知道是否有一種有效的方法來適應上面的jquery（或類似的東西）到一個更移動友好的變化？也許替代.scroll()？我相信像ScrollMagic/ SuperScrollerama或iScroll這樣的插件可能包含一個移動設備優化的解決方案，並具有類似的最終結果，但如果可能的話，非常適合在不使用插件的情況下在移動設備上實現效果，因爲它已經在桌面上運行良好。預先感謝您提供的任何建議，建議或想法！

來源

2014-05-12 jonfre10

我前幾天創建了一個功能非常類似的插件。該插件是multiScroll.js，並創建一個分爲兩個垂直面板的頁面，並在滾動時進行相反的移動。

它適用於觸摸設備以及老的瀏覽器如IE 8

enter image description here

來源

2014-05-14 16:00:53 Alvaro

精彩！謝謝，阿爾瓦羅。（如果可以的話，我會贊成！） – jonfre10

jQuery：獲取多方向滾動效果以在移動設備上工作

回答

相關問題