防止scrollTop從調用滾動事件

我試圖創建此行爲：當用戶滾動鼠標滾輪（或按↓）網頁向下滾動窗口的高度。防止scrollTop從調用滾動事件

我已經結束了與下面的代碼：

var newScrollTop, 
    oldScrollTop = $(window).scrollTop(), 
    preventScroll = false; 
$(window).scroll(function() { 
    if (!preventScroll) { 
     preventScroll = true; 
     newScrollTop = $(this).scrollTop(); 
     if (newScrollTop > oldScrollTop) { 
      $(this).scrollTop(oldScrollTop + $(window).height()); 
     } 
     else { 
      $(this).scrollTop(oldScrollTop - $(window).height()); 
     } 
     oldScrollTop = newScrollTop; 
     preventScroll = false; 
    } 
});

但正如我期望它這不起作用：滾動活動頁面滾動到最邊緣（底部或頂部）。我錯過了什麼？

來源

2012-10-06 Pavlo

有沒有簡單的方法來覆蓋默認的瀏覽器滾動功能。這裏是做你想要的東西的一種方式，但它需要布蘭登·艾倫的jquery-mousewheel plugin管理鼠標滾輪：

$(function() { 
    // Ugly hack to disable browser scrolling (downside: hides scrollbar!!!) 
    $('html').css('overflow', 'hidden'); 

    // Get viewport height by which to scroll (up or down) 
    var viewportHeight = $(window).height(); 

    // Recache viewport height on browser resize 
    $(window).on('resize', function() { 
     viewportHeight = $(window).height(); 
    }); 

    // Scroll on mousewheel 
    $('html').on('mousewheel', function(event, delta, deltaX, deltaY) { 
     // scroll down 
     if (deltaY < 0) 
      window.scrollBy(0, viewportHeight); 
     // scroll up 
     else 
      window.scrollBy(0, -viewportHeight); 
    }); 

    // Disable document keypress event 
    // which would scroll the content even with "overlow: hidden" 
    $(document).on('keypress', function(){ 
     return false; 
    }); 

    // Scroll on arrow up/down keys 
    $(document).on('keydown', function(event){ 
     // arrow down key 
     if (event.which == 40) 
      window.scrollBy(0, viewportHeight); 
     // arrow up key 
     if (event.which == 38) 
      window.scrollBy(0, -viewportHeight); 
    }); 
});

這裏有一個fiddle演示代碼。除了我的解決方案存在一個醜陋的缺點之外，它一切運作良好。 $('html').css('overflow', 'hidden');正在刪除瀏覽器滾動條。

來源

2012-10-06 20:27:18 Bogdan

我已經有滾動條，隱藏和禁用'keypress'似乎是不必要的。另一部分工作就像一個魅力。非常感謝。 – Pavlo

很高興我能幫上忙。我注意到我的解決方案存在一個小錯誤，更確切地說，如果您調整瀏覽器大小，那麼viewportHeight不再有效，因爲它在DOMReady上緩存。我更新了代碼來管理它。 – Bogdan

謝謝。你投票讓我超過了這一點:-)。 – Bogdan

問題是您使用的是scrollTop()，它會在窗口滾動事件本身內部觸發滾動事件。

因此，基本上，隨着您編寫的代碼，您會遇到無限循環，因爲只要第一個滾動事件被觸發，另一個就會被scrollTop()觸發，而您的preventScroll變量仍未設置爲false，依此類推。

爲了讓你的代碼工作，你將有你的preventScroll變量設置爲false的setTimeout函數裏面，像這樣：

var newScrollTop, 
    oldScrollTop = $(window).scrollTop(), 
    preventScroll = false; 

$(window).scroll(function() { 
    if (!preventScroll) { 
     preventScroll = true; 
     newScrollTop = $(this).scrollTop(); 
     if (newScrollTop > oldScrollTop) { 
      $(this).scrollTop(oldScrollTop + $(window).height()); 
     } 
     else { 
      $(this).scrollTop(oldScrollTop - $(window).height()); 
     } 
     oldScrollTop = newScrollTop; 

     setTimeout(function(){ preventScroll = false; }, 0); 
    } 
});

我們添加一些「延遲」我們設置preventScroll到false之前。這種方式當你打電話scrollTop()preventScroll變量仍然會被設置爲真！

這裏的工作小提琴：http://jsfiddle.net/J6Fcm/（我修改一點點代碼，讓滾動步驟，按預期）

來源

2012-10-06 21:16:31

防止scrollTop從調用滾動事件

回答

相關問題