平滑的頁面滾動
[英]Smooth page scrolling
問題描述
Mac用戶知道使用觸摸板滾動頁面非常柔軟。 但是，當您使用鼠標滾輪或什至使用瀏覽器滾動條滾動頁面時，頁面滾動不是很柔和，但有一些中斷。 之所以發生它，是因為scrollTop有所不同，因為它並不呈現每個像素變化。
有沒有辦法使跨瀏覽器的軟頁像觸摸板一樣滾動？ 我正在嘗試使用以下代碼：
$window = $(window); if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false); window.onmousewheel = document.onmousewheel = wheel; function wheel(event) { var delta = 0; if (event.wheelDelta) delta = event.wheelDelta / 90; else if (event.detail) delta = -event.detail / 3; handle(delta); if (event.preventDefault) event.preventDefault(); event.returnValue = false; } var goUp = true; var end = null; var interval = null; function handle(delta) { var animationInterval = 20; //lower is faster var scrollSpeed = 20; //lower is faster if (end == null) { end = $window.scrollTop(); } end -= 20 * delta; goUp = delta > 0; if (interval == null) { interval = setInterval(function () { var scrollTop = $window.scrollTop(); var step = Math.round((end - scrollTop) / scrollSpeed); if (scrollTop <= 0 || scrollTop >= $window.prop("scrollHeight") - $window.height() || goUp && step > -1 || !goUp && step < 1 ) { clearInterval(interval); interval = null; end = null; } $window.scrollTop(scrollTop + step ); }, animationInterval); } }
p:nth-child(10n) {background-color: #d00}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </body> </html>
而且此代碼可在Google Chrome和Opera中完美運行。 但是Mozilla和Safari沒有顯示類似的軟滾動。 它們的滾動內容太慢。
有沒有其他方法可以使軟頁滾動？
2 個解決方案
解決方案1
1 已采納 2017-01-19 11:39:21
您可以使用https://github.com/jquery/jquery-mousewheel來幫助平滑滾動，因為Firefox需要不同的事件來進行鼠標滾輪。
此插件可幫助您在所有瀏覽器中實現滾動效果。 通常，我使用TweenMax進行平滑滾動。
解決方案2
0 2017-01-19 11:37:30
全頁平滑滾動
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.