同一時間向下滾動一格和一格？

我創建了一個垂直分爲兩列（每個屏幕的一半）的站點。如果向下滾動，將光標放在站點上的任何位置，左列應該正常行駛並向下滾動，同樣，右列應向相反方向滾動。同一時間向下滾動一格和一格？

我來到這個問題 - Modify scroll direction - 試圖得到一個解決方案，但我不能得到它的工作。

這是我的嘗試：http://jsbin.com/UJEBohu/1/edit

來源

2013-10-29 Pandorrra

在我試着回答之前，你知道css嗎？ JavaScript的？ jQuery的？你的jsbin似乎暗示不那麼好...（如何溢出：滾動？） –

我知道的HTML和CSS，但我不是真正熟悉的JavaScript和jQuery的 - 所以是的，我的JSB可能不是很好。 – Pandorrra

我做了一個可行的解決方案，在這裏：http://jsfiddle.net/QDUyR/1/

在<body> onload事件將這個，你應該設置:)

// Add event listener for scrolling 
$("#left").on("scroll", function() { 
    var scrolledleft = parseInt($("#left").scrollTop()) * -1; 
    console.log(scrolledleft + scrolledright) 
    $("#right").scrollTop(scrolledleft + scrolledright) 
}) 

//Move right column to bottom initially 
$("#right").scrollTop($("#right").height()) 
//Get actual distance scrolled 
var scrolledright = parseInt($("#right").scrollTop())

編輯：只要它們相等，無論div的高度如何都可以更新。

來源

2013-10-29 20:12:52 aanders77

不同的瀏覽器在您每次滾動時都會滾動一個不同的數量。

這裏是我更新的fiddle我還沒有試過它在safari中。我在鼠標滾輪上使用綁定，因爲每次滾動一次Mozilla的滾動事件會觸發多次。

首先我檢查一下我們正在使用的瀏覽器，並設置每個滾動條對於該瀏覽器的數量。然後我根據每個瀏覽器的滾動量來計算移動正確div的量。

在鼠標滾輪事件中，我檢查以確保正確的div不會遠遠低於或高於屏幕。

我使用event.originalEvent.detail來告訴鼠標滾輪在mozilla中的行進方向，在IE和Chrome中我使用event.originalEvent.wheelDelta。

以下是代碼。

$(function() 
{ 
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6) 
    { 
     //Firefox 
     var eachScroll = 114; 
    } 
    else if (navigator.userAgent.indexOf('Chrome') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Chrome') + 7).split(' ')[0]) >= 15) 
    { 
     //Chrome 
     var eachScroll = 100; 
    } 
    else if(navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Version') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Version') + 8).split(' ')[0]) >= 5) 
    { 
     //Safari 
    } 
    else 
    { 
     //IE 
     var eachScroll = 94; 
    } 

      var windowHeight = $(window).height(); 
      var containerHeight = $("#container").height(); 
      var heightLeftover = containerHeight - windowHeight; // Actual amount left to scroll 
      var totalScrolls = heightLeftover/eachScroll; // Total number of scrolls 
      totalScrolls = Math.ceil(totalScrolls); // Always round up 
      var amountToScroll = ($("#right").height() - containerHeight)/totalScrolls; 
      // Amount that right div will move every time we scroll 

      $(window).bind("mousewheel DOMMouseScroll", function(event){ 
      var top = $("#right").position().top; 

       if(event.originalEvent.wheelDelta) // Check if wheelDelta exists 
       { 
       if(event.originalEvent.wheelDelta == - 120) 
       { 
        if(top < 2) 
        $("#right").css({top: top + amountToScroll}); 
       } 
       else 
       { 
        if(top > -2000) 
         $("#right").css({top: top - amountToScroll}); 
       } 
      } 
      else if(event.originalEvent.detail) // check if detail exists 
      { 
       if(event.originalEvent.detail == 3) 
       { 
        if(top < 2) 
        $("#right").css({top: top + amountToScroll}); 
       } 
       else 
       { 
        if(top > -2000) 
        $("#right").css({top: top - amountToScroll}); 
       } 
      } 
      }); 
     });

來源

2013-10-29 20:45:15 Matt

是的，這是我正在尋找的方向。現在唯一的問題是，如果通過滾動到達頁面的末尾，在Chrome和Safari中左側的div停止，但右側的div停止滾動。我怎樣才能讓它停止正確的呢？ – Pandorrra

我在Chrome，IE和Mozilla中試過了，它停在底部。你可以張貼另一個小提琴或你有什麼，我會看看，如果我能找到什麼導致它。 – Matt

這就是我試過的：http://jsbin.com/OcEMuTu/1/ – Pandorrra

同一時間向下滾動一格和一格？

回答

相關問題