類

按照我的個人理解，滾動分全局滾動(瀏覽器窗口)跟局部滾動(自定義的盒子)，以下內容絕大部分都是指全局滾動，局部滾動的話獲取指定的DOM再調用相應的API即可?

如何設置全局滾動條高度

1. 最常用的方法：

window.scrollTo(0, 0);
// or
window.scrollTo({
 left: 0,
 top: 100
});
復制代碼

1. 也可以利用相對滾動設置：

window.scrollBy(0, 0);
// or
window.scrollBy({
 left: 0,
 top: 100
});
復制代碼

1. 或者利用scrollTop設置：

document.scrollingElement.scrollTop=100;
復制代碼

注意：scrollTo跟scrollBy的參數是一樣的，區別就是scrollBy滾動距離是相對與當前滾動條位置進行滾動?

效果對比如下：

很明顯，前者就是把滾動高度設置成100，而后者是每次都增加100，這就是為什么稱之為相對滾動了?

如何指定一個元素顯示在視窗

1. 最常用的方法：

// 獲取元素的offsetTop(元素距離文檔頂部的距離)
let offsetTop=document.querySelector(".box").offsetTop;
// 設置滾動條的高度
window.scrollTo(0, offsetTop);
復制代碼

效果如下：

1. 或者用錨點：

<a href="#box">盒子出現在頂部</a>
<div id="box"></div>
復制代碼

效果如下：

1. 或者利用scrollIntoView進行展現：

document.querySelector(".box").scrollIntoView();
復制代碼

效果如下：

還可以指定元素的出現位置：

// start出現在視口頂部、center出現在視口中央、end出現在視口底部
document.querySelector(".box").scrollIntoView({
 block: "start" || "center" || "end"
});
復制代碼

效果如下：

如何設置滾動具有平滑的過渡效果

1. 利用每個方法的參數設置：

window.scrollTo({
 behavior: "smooth"
});
window.scrollBy({
 behavior: "smooth"
});
document.querySelector(".box").scrollIntoView({
 behavior: "smooth"
});
復制代碼

效果如下：

1. 或者用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?

最后

以上涉及到的方法或屬性文檔如下：

1. scrollTo
2. scrollBy
3. scrollIntoView
4. scrollingElement
5. scroll-behavior
6. -webkit-overflow-scrolling
7. overscroll-behavior
8. scroll-snap-type
9. scroll-snap-align

如果你覺得這篇文章不錯，請別忘記點個贊跟關注哦~