最近挺忙的,此次抽空寫寫文陶冶下情操
,瀏覽器滾動
真的每天見日日見啦,好比你如今看的這篇文章,往下看就必須得滾動,這篇文章主要聊聊滾動相關
的一些方法
跟屬性
,還有一些有趣的例子🎈 文章涉及到的方法或屬性
在文末會放連接,方便你們自行查閱!css
按照個人我的理解,滾動分全局滾動(瀏覽器窗口)
跟局部滾動(自定義的盒子)
,如下內容絕大部分都是指全局滾動
,局部滾動
的話獲取指定的DOM
再調用相應的API
便可✅html
window.scrollTo(0, 0);
// or
window.scrollTo({
left: 0,
top: 100
});
複製代碼
相對滾動
設置:window.scrollBy(0, 0);
// or
window.scrollBy({
left: 0,
top: 100
});
複製代碼
scrollTop
設置:document.scrollingElement.scrollTop = 100;
複製代碼
注意:scrollTo
跟scrollBy
的參數是同樣的,區別就是scrollBy
滾動距離是相對與當前滾動條位置進行滾動✅前端
效果對好比下:web
很明顯,前者
就是把滾動高度設置成100
,而後者
是每次都增長100
,這就是爲何稱之爲相對滾動
了✅瀏覽器
// 獲取元素的offsetTop(元素距離文檔頂部的距離)
let offsetTop = document.querySelector(".box").offsetTop;
// 設置滾動條的高度
window.scrollTo(0, offsetTop);
複製代碼
效果以下:bash
<a href="#box">盒子出如今頂部</a>
<div id="box"></div>
複製代碼
效果以下:微信
scrollIntoView
進行展示:document.querySelector(".box").scrollIntoView();
複製代碼
效果以下: app
還能夠指定元素的出現位置:函數
// start出如今視口頂部、center出如今視口中央、end出如今視口底部
document.querySelector(".box").scrollIntoView({
block: "start" || "center" || "end"
});
複製代碼
效果以下: post
參數
設置: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
)的滾動行爲
✅
該對象能夠很是兼容
地獲取scrollTop
、scrollHeight
等屬性,在移動端
跟PC端
都屢試不爽🤞
還記得當初寫這個兼容性方法:
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
複製代碼
如今你只須要:
let scrollHeight = document.scrollingElement.scrollHeight;
複製代碼
由於在MDN
中是這樣介紹它的:
標準模式返回documentElement
,怪異模式返回body
;
window.scrollTo({
left: 0,
top: document.scrollingElement.scrollHeight
});
// 若是你實在是懶的話...
window.scrollTo(0, 999999);
複製代碼
注意:平滑滾動到頂部
或者底部
本身加參數或者屬性便可✅
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輸入結束等✅
除了瀏覽器原生滾動,自定義的滾動條
都會出現這種狀況,加如下屬性就能夠解決:
.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
"獲取羣聊
二維碼,一塊兒學習、一塊兒交流、一塊兒摸魚🌊