[英]On scroll, scroll 100vh down/up works once
我想處理滾動,就像我向下滾動時一樣,想滾動整個viewport.height
並以相同但相反的方式向上滾動:
它正在與此一起工作,但是它只能向下滾動一次並向上備份一次(也有一段時間,我無法滾動,如果一段時間后我又向下滾動,ig就會下降,然后再次上升):
function viewport() { var e = window, a = 'inner'; if (!('innerWidth' in window )) { a = 'client'; e = document.documentElement || document.body; } return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; } var height = viewport().height; $(document).on('wheel', function(e) { var delta = e.originalEvent.deltaY; if(delta > 0) $('html, body').animate({scrollTop: height+'px'}); else $('html, body').animate({scrollTop: '-'+height+'px'}); return false; });
body{min-height: 300vh; overflow: auto;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
問題是因為您需要從其當前位置增加或減少scrollTop
。 您當前的代碼只會反復將其設置為一個值,因此似乎沒有任何變化。
要解決此問題,請根據所需的行進方向在scrollTop
值前加上+=
或-=
。 還要注意,您可以在jQuery中簡單地使用$(window).height()
來代替當前使用的viewport()
函數。
最后,您還需要在其中包含一個stop(true)
調用,以防止當用戶重復滾動鼠標滾輪時動畫排隊。
$(document).on('wheel', function(e) { e.preventDefault(); $('html, body').stop(true).animate({ scrollTop: (e.originalEvent.deltaY > 0 ? '+=' : '-=') + $(window).height() + 'px' }); });
body { min-height: 300vh; overflow: auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.