您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)web開發(fā)中如何設(shè)置全局滾動條高度,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
分類
按照我的個人理解,滾動分全局滾動(瀏覽器窗口)
跟局部滾動(自定義的盒子)
,以下內(nèi)容絕大部分都是指全局滾動
,局部滾動
的話獲取指定的DOM
再調(diào)用相應(yīng)的API
即可?
如何設(shè)置全局滾動條高度
最常用的方法:
window.scrollTo(0, 0); // or window.scrollTo({ left: 0, top: 100 });
也可以利用相對滾動
設(shè)置:
window.scrollBy(0, 0); // or window.scrollBy({ left: 0, top: 100 });
或者利用scrollTop
設(shè)置:
document.scrollingElement.scrollTop = 100;
注意:scrollTo
跟scrollBy
的參數(shù)是一樣的,區(qū)別就是scrollBy
滾動距離是相對與當前滾動條位置進行滾動?
效果對比如下:
很明顯,前者
就是把滾動高度設(shè)置成100
,而后者
是每次都增加100
,這就是為什么稱之為相對滾動
了?
如何指定一個元素顯示在視窗
最常用的方法:
// 獲取元素的offsetTop(元素距離文檔頂部的距離) let offsetTop = document.querySelector(".box").offsetTop; // 設(shè)置滾動條的高度 window.scrollTo(0, offsetTop);
效果如下:
或者用錨點:
<a href="#box">盒子出現(xiàn)在頂部</a> <div id="box"></div>
效果如下:
或者利用scrollIntoView
進行展現(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è)置滾動具有平滑的過渡效果利用每個方法的參數(shù)
設(shè)置:
window.scrollTo({ behavior: "smooth" }); window.scrollBy({ behavior: "smooth" }); document.querySelector(".box").scrollIntoView({ behavior: "smooth" });
效果如下:
或者用css
屬性設(shè)置:
html { scroll-behavior: smooth; // 全局滾動具有平滑效果 } // 或者所有 * { scroll-behavior: smooth; }
效果如下:
注意:設(shè)置了該屬性之后,所有方法都可以不用設(shè)置behavior
參數(shù)了,二選一即可,因為都是控制當前指定元素的滾動行為
,所以錨點跳轉(zhuǎn)、設(shè)置scrollTop
也具有平滑(smooth
)的滾動行為
?
一些有趣的東西
1. scrollingElement
該對象可以非常兼容
地獲取scrollTop
、scrollHeight
等屬性,在移動端
跟PC端
都屢試不爽?
還記得當初寫這個兼容性方法:
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
現(xiàn)在你只需要:
let scrollHeight = document.scrollingElement.scrollHeight;
因為在MDN
中是這樣介紹它的:
標準模式返回documentElement
,怪異模式返回body
;
2. 滾動到底部
window.scrollTo({ left: 0, top: document.scrollingElement.scrollHeight }); // 如果你實在是懶的話... window.scrollTo(0, 999999);
注意:平滑滾動到頂部
或者底部
自己加參數(shù)或者屬性即可?
3. 判斷瀏覽器已滾動到底部
window.addEventListener("scroll", () => { let { scrollTop, scrollHeight, clientHeight } = document.scrollingElement; // 當前滾動高度 + 視口高度 >= 文檔總高度 if (scrollTop + clientHeight >= scrollHeight) { console.log("已到達底部"); } });
效果如下:
函數(shù)節(jié)流
當你沒加函數(shù)節(jié)流:
window.addEventListener("scroll", () => console.log("我在滾我在滾!"));
效果如下:
當你加了函數(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ù)防抖
當你加了函數(shù)防抖之后:
window.addEventListener("scroll", debounce(() => console.log("滾動結(jié)束!")));
效果如下:
debounce
源碼:
function debounce(fn, interval = 500) { let timeout = null; return function () { clearTimeout(timeout); timeout = setTimeout(() => { fn.apply(this, arguments); }, interval); }; }
用處:判斷某個動作結(jié)束
,如剛剛的滾動結(jié)束、input輸入結(jié)束等?
解決IOS設(shè)備局部滾動不順暢(粘手)
除了瀏覽器原生滾動,自定義的滾動條
都會出現(xiàn)這種情況,加以下屬性就可以解決:
.box { -webkit-overflow-scrolling: touch; }
對比如下:
注意:要真機才能看到效果,這里指的局部滾動
是指自己定義的盒子
,然后設(shè)置overflow: auto || scroll;
后的滾動行為;
滾動傳播
指有多個滾動區(qū)域
,當一個滾動區(qū)域
滾動完之后,繼續(xù)滾動會傳播到
到父區(qū)域繼續(xù)滾動的行為:
.box { overscroll-behavior: contain; // 阻止?jié)L動傳播 }
對比效果圖如下:
橫向滾動
移動端
遇到此需求比較多,常用于圖片展示:
<ul> <li> <img src=""> </li> // ... </ul> ul { white-space: nowrap; // 超出不換行 overflow-x: auto; li { display: inline-block; img { display: block; width: 200px; } } }
效果如下:
滾動結(jié)束后,強制滾動到指定元素
基于上面的例子,我們設(shè)置如下屬性:
ul { scroll-snap-type: x mandatory; li { scroll-snap-align: start; } }
效果如下:
仔細看會發(fā)現(xiàn),我們松手的時候,會將最近的元素
滾動到最右邊(初始位置,對于Y軸來講就是頂部,X軸則是右邊)
也可以設(shè)置出現(xiàn)在中間:
li { scroll-snap-align: center; }
效果如下:
這樣,一個簡易的輪播圖
效果就出來啦!
還可以實現(xiàn)全屏滾動:
注意:該屬性會在你滾動完
之后再做處理,也就是說你可以一下子從圖片1
跳到圖片9
?
最后
以上涉及到的方法或?qū)傩?/code>文檔如下:
scrollTo
scrollBy
scrollIntoView
scrollingElement
scroll-behavior
-webkit-overflow-scrolling
overscroll-behavior
scroll-snap-type
scroll-snap-align
關(guān)于“web開發(fā)中如何設(shè)置全局滾動條高度”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。