滾動(dòng)條是瀏覽器中最常見(jiàn)的組件了。然而，滾動(dòng)條的顏值總是不能令人滿(mǎn)意，特別是嵌入在頁(yè)面中的滾動(dòng)條:
漂亮的網(wǎng)頁(yè)突然出現(xiàn)一根灰灰的滾動(dòng)條真是太煞風(fēng)景了。雖然瀏覽器也提供了一些偽類(lèi)能改善滾動(dòng)條的外觀，但改善程度也是有限。為什么不自己用 div 實(shí)現(xiàn)一根萌萌的滾動(dòng)條呢，比如這根：
貪吃蛇滾動(dòng)條
今天就來(lái)講講如何用 div 自己實(shí)現(xiàn)滾動(dòng)條。
1. 先得有滾動(dòng)條
在開(kāi)始之前，我們要先隱藏瀏覽器本身的滾動(dòng)條，加上自制的滾動(dòng)條
| <body> <div id="container"> <div class="scrollbar"></div> bla bla bla ... 一大段一屏顯示不下的內(nèi)容 </div></body> |
我們?cè)谛枰獫L動(dòng)條的 div 中增加了一個(gè) class="scroll" 的 div 代表滾動(dòng)條，給這個(gè) div 來(lái)點(diǎn)樣式：
| html, body, #container { height: 100%; margin: 0;}#container { padding: 2rem; box-sizing: border-box; // 為了設(shè)置padding時(shí)不增加元素本身高度，避免出現(xiàn)滾動(dòng)條 overflow-y: hidden; // 隱藏瀏覽器本身的滾動(dòng)條 position: relative; padding-right: 30px; // 給自制滾動(dòng)條留點(diǎn)空間，不要其他內(nèi)容重合了}.scrollbar { height: 166px; width: 20px; border-radius: 20px; background: #ccc; position: absolute; // 絕對(duì)定位，方便設(shè)置滾動(dòng)條位置 right: 0; // 設(shè)置滾動(dòng)條在最右邊} |
一個(gè)簡(jiǎn)易的滾動(dòng)條就有了：
雖然比瀏覽器默認(rèn)的滾動(dòng)條好不到哪兒去，不過(guò)你可以自由發(fā)揮，把GIF動(dòng)圖作為滾動(dòng)條也是可以的。由于滾動(dòng)條是 absolute 定位的，后面就通過(guò) top 屬性來(lái)控制滾動(dòng)條的位置。
現(xiàn)在滾動(dòng)條還是靜態(tài)的，想要讓他動(dòng)起來(lái)，就要先了解下滾動(dòng)條與文檔滾動(dòng)的關(guān)系。
2. 滾動(dòng)條與文檔滾動(dòng)的關(guān)系
先看這張圖
藍(lán)色框代表一個(gè)很長(zhǎng)的文檔，文檔的高度可以通過(guò) scrollHeight 屬性獲得。
屏幕一下子顯示不了那么多內(nèi)容，只能顯示紅色區(qū)域部分，紅色區(qū)域就稱(chēng)為”視口“（Viewport），視口的高度可以通過(guò) offsetHeight 屬性獲得。
頁(yè)面剛加載時(shí)，視口的頂部和文檔頂部是重合的，滾動(dòng)條（綠色豎條）也在最頂部。當(dāng)我們將滾動(dòng)條下拉時(shí)，文檔的內(nèi)容在向上滾動(dòng)，其實(shí)是視口在向下移動(dòng)：
新聞熱點(diǎn)
疑難解答
圖片精選
