分類
按照我的個人理解,滾動分全局滾動(瀏覽器窗口)跟局部滾動(自定義的盒子),以下內容絕大部分都是指全局滾動,局部滾動的話獲取指定的DOM再調用相應的API即可✅
如何設置全局滾動條高度
最常用的方法:
window.scrollTo(0, 0);// orwindow.scrollTo({ left: 0, top: 100}); 複製代碼
也可以利用相對滾動設置:
window.scrollBy(0, 0);// orwindow.scrollBy({ left: 0, top: 100}); 複製代碼
或者利用scrollTop設置:
document.scrollingElement.scrollTop = 100;複製代碼
注意:scrollTo跟scrollBy的參數是一樣的,區別就是scrollBy滾動距離是相對與當前滾動條位置進行滾動✅
效果對比如下:
很明顯,前者就是把滾動高度設置成100,而後者是每次都增加100,這就是爲什麼稱之爲相對滾動了✅
如何指定一個元素顯示在視窗
最常用的方法:
// 獲取元素的offsetTop(元素距離文檔頂部的距離)let offsetTop = document.querySelector(".box").offsetTop;// 設置滾動條的高度window.scrollTo(0, offsetTop); 複製代碼
效果如下:
或者用錨點:
<a href="#box">盒子出現在頂部</a><div id="box"></div>複製代碼
效果如下:
或者利用scrollIntoView進行展現:
document.querySelector(".box").scrollIntoView(); 複製代碼
效果如下:
還可以指定元素的出現位置:
// start出現在視口頂部、center出現在視口中央、end出現在視口底部 document.querySelector(".box").scrollIntoView({ block: "start" || "center" || "end"}); 複製代碼
效果如下:
如何設置滾動具有平滑的過渡效果
利用每個方法的參數設置:
window.scrollTo({ behavior: "smooth"});window.scrollBy({ behavior: "smooth"});document.querySelector(".box").scrollIntoView({ behavior: "smooth"}); 複製代碼
效果如下:
或者用css屬性設置:
html { scroll-behavior: smooth; // 全局滾動具有平滑效果}// 或者所有* { scroll-behavior: smooth; } 複製代碼
效果如下:
注意:設置了該屬性之後,所有方法都可以不用設置behavior參數了,二選一即可,因爲都是控制當前指定元素的滾動行爲,所以錨點跳轉、設置scrollTop也具有平滑(smooth)的滾動行爲✅
一些有趣的東西
1. scrollingElement
該對象可以非常兼容地獲取scrollTop、scrollHeight等屬性,在移動端跟PC端都屢試不爽
還記得當初寫這個兼容性方法:
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; 複製代碼
現在你只需要:
let scrollHeight = document.scrollingElement.scrollHeight; 複製代碼
因爲在MDN中是這樣介紹它的:
標準模式返回documentElement,怪異模式返回body;
2. 滾動到底部
window.scrollTo({ left: 0, top: document.scrollingElement.scrollHeight });// 如果你實在是懶的話...window.scrollTo(0, 999999); 複製代碼
注意:平滑滾動到頂部或者底部自己加參數或者屬性即可✅
3. 判斷瀏覽器已滾動到底部
window.addEventListener("scroll", () => { let { scrollTop, scrollHeight, clientHeight } = document.scrollingElement; // 當前滾動高度 + 視口高度 >= 文檔總高度 if (scrollTop + clientHeight >= scrollHeight) { console.log("已到達底部"); } }); 複製代碼
效果如下:
函數節流
當你沒加函數節流:
window.addEventListener("scroll", () => console.log("我在滾我在滾!")); 複製代碼
效果如下:
當你加了函數節流之後:
window.addEventListener("scroll", throttle(() => console.log("我在滾我在滾!"))); 複製代碼
效果如下:
throttle源碼:
function throttle(fn, interval = 500) { let run = true; return function () { if (!run) return; run = false; setTimeout(() => { fn.apply(this, arguments); run = true; }, interval); }; } 複製代碼
用處:減少代碼執行頻率✅
函數防抖
當你加了函數防抖之後:
window.addEventListener("scroll", debounce(() => console.log("滾動結束!"))); 複製代碼
效果如下:
debounce源碼:
function debounce(fn, interval = 500) { let timeout = null; return function () { clearTimeout(timeout); timeout = setTimeout(() => { fn.apply(this, arguments); }, interval); }; } 複製代碼
用處:判斷某個動作結束,如剛剛的滾動結束、input輸入結束等✅
解決IOS設備局部滾動不順暢(粘手)
除了瀏覽器原生滾動,自定義的滾動條都會出現這種情況,加以下屬性就可以解決:
.box { -webkit-overflow-scrolling: touch; } 複製代碼
對比如下:
注意:要真機才能看到效果,這裏指的局部滾動是指自己定義的盒子,然後設置overflow: auto || scroll;後的滾動行爲;
滾動傳播
指有多個滾動區域,當一個滾動區域滾動完之後,繼續滾動會傳播到到父區域繼續滾動的行爲:
.box { overscroll-behavior: contain; // 阻止滾動傳播} 複製代碼
對比效果圖如下:
橫向滾動
移動端遇到此需求比較多,常用於圖片展示:
<ul> <li> <img src=""> </li> // ...</ul>ul { white-space: nowrap; // 超出不換行 overflow-x: auto; li { display: inline-block; img { display: block; width: 200px; } } } 複製代碼
效果如下:
滾動結束後,強制滾動到指定元素
基於上面的例子,我們設置如下屬性:
ul { scroll-snap-type: x mandatory; li { scroll-snap-align: start; } } 複製代碼
效果如下:
仔細看會發現,我們鬆手的時候,會將最近的元素滾動到最右邊(初始位置,對於Y軸來講就是頂部,X軸則是右邊)
也可以設置出現在中間:
li { scroll-snap-align: center; } 複製代碼
效果如下:
這樣,一個簡易的輪播圖效果就出來啦!
還可以實現全屏滾動:
注意:該屬性會在你滾動完之後再做處理,也就是說你可以一下子從圖片1跳到圖片9✅
最後
以上涉及到的方法或屬性文檔如下:
scrollTo
scrollBy
scrollIntoView
scrollingElement
scroll-behavior
-webkit-overflow-scrolling
overscroll-behavior
scroll-snap-type
scroll-snap-align
如果你覺得這篇文章不錯,請別忘記點個贊跟關注哦~