最近挺忙的，這次抽空寫寫文陶冶下情操，瀏覽器滾動(dòng)真的天天見日日見啦，比如你現(xiàn)在看的這篇文章，往下看就必須得滾動(dòng)，這篇文章主要聊聊滾動(dòng)相關(guān)的一些方法跟屬性，還有一些有趣的例子🎈 文章涉及到的方法或?qū)傩?/code>在文末會(huì)放鏈接，方便大家自行查閱！
分類
按照我的個(gè)人理解，滾動(dòng)分全局滾動(dòng)(瀏覽器窗口)跟局部滾動(dòng)(自定義的盒子)，以下內(nèi)容絕大部分都是指全局滾動(dòng)，局部滾動(dòng)的話獲取指定的DOM再調(diào)用相應(yīng)的API即可✅
如何設(shè)置全局滾動(dòng)條高度
最常用的方法：
window.scrollTo(0, 0);
// or
window.scrollTo({
left: 0,
top: 100
});
也可以利用相對(duì)滾動(dòng)設(shè)置：
window.scrollBy(0, 0);
// or
window.scrollBy({
left: 0,
top: 100
});
或者利用scrollTop設(shè)置：
document.scrollingElement.scrollTop = 100;
注意：scrollTo跟scrollBy的參數(shù)是一樣的，區(qū)別就是scrollBy滾動(dòng)距離是相對(duì)與當(dāng)前滾動(dòng)條位置進(jìn)行滾動(dòng)✅
效果對(duì)比如下：
很明顯，前者就是把滾動(dòng)高度設(shè)置成100，而后者是每次都增加100，這就是為什么稱之為相對(duì)滾動(dòng)了✅
如何指定一個(gè)元素顯示在視窗
最常用的方法：
// 獲取元素的offsetTop(元素距離文檔頂部的距離)
let offsetTop = document.querySelector(".box").offsetTop;
// 設(shè)置滾動(dòng)條的高度
window.scrollTo(0, offsetTop);
效果如下：
或者用錨點(diǎn)：
<a href="#box">盒子出現(xiàn)在頂部</a>
<div id="box"></div>
效果如下：
或者利用scrollIntoView進(jìn)行展現(xiàn)：
document.querySelector(".box").scrollIntoView();
效果如下：
還可以指定元素的出現(xiàn)位置：
// start出現(xiàn)在視口頂部、center出現(xiàn)在視口中央、end出現(xiàn)在視口底部
document.querySelector(".box").scrollIntoView({
block: "start" || "center" || "end"
});
效果如下：
如何設(shè)置滾動(dòng)具有平滑的過渡效果利用每個(gè)方法的參數(shù)設(shè)置：
window.scrollTo({
behavior: "smooth"
});
window.scrollBy({
behavior: "smooth"
});
document.querySelector(".box").scrollIntoView({
behavior: "smooth"
});
效果如下：
或者用css屬性設(shè)置：
html {
scroll-behavior: smooth; // 全局滾動(dòng)具有平滑效果
}
// 或者所有
* {
scroll-behavior: smooth;
}
效果如下：
注意：設(shè)置了該屬性之后，所有方法都可以不用設(shè)置behavior參數(shù)了，二選一即可，因?yàn)槎际?code>控制當(dāng)前指定元素的滾動(dòng)行為，所以錨點(diǎn)跳轉(zhuǎn)、設(shè)置scrollTop也具有平滑(smooth)的滾動(dòng)行為✅
一些有趣的東西
1. scrollingElement
該對(duì)象可以非常兼容地獲取scrollTop、scrollHeight等屬性，在移動(dòng)端跟PC端都屢試不爽🤞
還記得當(dāng)初寫這個(gè)兼容性方法：
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
現(xiàn)在你只需要：
let scrollHeight = document.scrollingElement.scrollHeight;
因?yàn)樵?code>MDN中是這樣介紹它的：
標(biāo)準(zhǔn)模式返回documentElement，怪異模式返回body；
2. 滾動(dòng)到底部
window.scrollTo({
left: 0,
top: document.scrollingElement.scrollHeight
});
// 如果你實(shí)在是懶的話...
window.scrollTo(0, 999999);
注意：平滑滾動(dòng)到頂部或者底部自己加參數(shù)或者屬性即可✅
3. 判斷瀏覽器已滾動(dòng)到底部
window.addEventListener("scroll", () => {
let {
scrollTop,
scrollHeight,
clientHeight
} = document.scrollingElement;
// 當(dāng)前滾動(dòng)高度 + 視口高度 >= 文檔總高度
if (scrollTop + clientHeight >= scrollHeight) {
console.log("已到達(dá)底部");
}
});
效果如下：
函數(shù)節(jié)流
當(dāng)你沒加函數(shù)節(jié)流：
window.addEventListener("scroll", () => console.log("我在滾我在滾！"));
效果如下：
當(dāng)你加了函數(shù)節(jié)流之后：
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);
};
}
用處：減少代碼執(zhí)行頻率✅
函數(shù)防抖
當(dāng)你加了函數(shù)防抖之后：
window.addEventListener("scroll", debounce(() => console.log("滾動(dòng)結(jié)束！")));
效果如下：
debounce源碼：
function debounce(fn, interval = 500) {
let timeout = null;
return function () {
clearTimeout(timeout);
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, interval);
};
}
用處：判斷某個(gè)動(dòng)作結(jié)束，如剛剛的滾動(dòng)結(jié)束、input輸入結(jié)束等✅
解決IOS設(shè)備局部滾動(dòng)不順暢(粘手)
除了瀏覽器原生滾動(dòng)，自定義的滾動(dòng)條都會(huì)出現(xiàn)這種情況，加以下屬性就可以解決：
.box {
-webkit-overflow-scrolling: touch;
}
對(duì)比如下：
注意：要真機(jī)才能看到效果，這里指的局部滾動(dòng)是指自己定義的盒子，然后設(shè)置overflow: auto || scroll;后的滾動(dòng)行為；
滾動(dòng)傳播
指有多個(gè)滾動(dòng)區(qū)域，當(dāng)一個(gè)滾動(dòng)區(qū)域滾動(dòng)完之后，繼續(xù)滾動(dòng)會(huì)傳播到到父區(qū)域繼續(xù)滾動(dòng)的行為：
.box {
overscroll-behavior: contain; // 阻止?jié)L動(dòng)傳播
}
對(duì)比效果圖如下：
橫向滾動(dòng)
移動(dòng)端遇到此需求比較多，常用于圖片展示：
<ul>
<li>
<img src="">
</li>
// ...
</ul>
ul {
white-space: nowrap; // 超出不換行
overflow-x: auto;
li {
display: inline-block;
img {
display: block;
width: 200px;
}
}
}
效果如下：
滾動(dòng)結(jié)束后，強(qiáng)制滾動(dòng)到指定元素
基于上面的例子，我們?cè)O(shè)置如下屬性：
ul {
scroll-snap-type: x mandatory;
li {
scroll-snap-align: start;
}
}
效果如下：
仔細(xì)看會(huì)發(fā)現(xiàn)，我們松手的時(shí)候，會(huì)將最近的元素滾動(dòng)到最右邊（初始位置，對(duì)于Y軸來講就是頂部，X軸則是右邊）
也可以設(shè)置出現(xiàn)在中間：
li {
scroll-snap-align: center;
}
效果如下：
這樣，一個(gè)簡(jiǎn)易的輪播圖效果就出來啦！
還可以實(shí)現(xiàn)全屏滾動(dòng)：
注意：該屬性會(huì)在你滾動(dòng)完之后再做處理，也就是說你可以一下子從圖片1跳到圖片9✅
最后
以上涉及到的方法或?qū)傩?/code>文檔如下：
- scrollTo
- scrollBy
- scrollIntoView
- scrollingElement
- scroll-behavior
- -webkit-overflow-scrolling
- overscroll-behavior
- scroll-snap-type
- scroll-snap-align
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
