溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“html5中實現平滑滾動效果的方法有哪些”，在日常操作中，相信很多人在html5中實現平滑滾動效果的方法有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”html5中實現平滑滾動效果的方法有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
1.使用CSS
完成功能的最高境界，只用CSS就搞定。代碼如下：
html {
scroll-behavior: smooth;
}該樣式的作用是為有滾動條的元素指定一個滾動的行為，但是只有在當用戶手動導航或者 CSSOM scrolling API觸發滾動的時候生效，不影響用戶行為產生的滾動。
2.使用Window.scrollTo API
我們都知道window.scrollTo(x, y)，通過傳入文檔中的x，y軸坐標來實現滾動到頁面某個位置的功能。這個API其實還可以傳入一個option，是一個對象，left值對應坐標中的x，top對應坐標中的y，還有一個值為behavior，可以讓你自定義滾動行為，然后我們這樣來實現滾動到頂部:
window.scrollTo({
left: 0,
top: 0,
behavior: 'smooth'
})3.使用requestAnimationFrame
經常能看到大名鼎鼎的requestAnimationFrame，但是沒機會用上，這次可以嘗嘗鮮了。我們知道requestAnimationFrame的作用就是告訴瀏覽器在下次重繪之前執行傳入的回調函數，這個行為是瀏覽器自動幫你做的。于是有了如下代碼:
const scrollToTop = () => {
let scrollTop = document.documentElement.scrollTo || document.body.scrollTop
if (scrollTop > 0) {
window.requestAnimationFrame(scrollTop)
window.scrollTop(0, scrollTop - scrollTo / 8)
}
}到此，關于“html5中實現平滑滾動效果的方法有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
