滾動條是瀏覽器中最常見的組件了。然而，滾動條的顏值總是不能令人滿意，特別是嵌入在頁面中的滾動條:
漂亮的網頁突然出現一根灰灰的滾動條真是太煞風景了。雖然瀏覽器也提供了一些偽類能改善滾動條的外觀，但改善程度也是有限。為什么不自己用 div 實現一根萌萌的滾動條呢，比如這根：
貪吃蛇滾動條
今天就來講講如何用 div 自己實現滾動條。
1. 先得有滾動條
在開始之前，我們要先隱藏瀏覽器本身的滾動條，加上自制的滾動條
<body> <div id="container"> <div class="scrollbar"></div> bla bla bla ... 一大段一屏顯示不下的內容 </div></body>
我們在需要滾動條的 div 中增加了一個 class="scroll" 的 div 代表滾動條，給這個 div 來點樣式：
html, body, #container { height: 100%; margin: 0;}#container { padding: 2rem; box-sizing: border-box; // 為了設置padding時不增加元素本身高度，避免出現滾動條 overflow-y: hidden; // 隱藏瀏覽器本身的滾動條 position: relative; padding-right: 30px; // 給自制滾動條留點空間，不要其他內容重合了}.scrollbar { height: 166px; width: 20px; border-radius: 20px; background: #ccc; position: absolute; // 絕對定位，方便設置滾動條位置 right: 0; // 設置滾動條在最右邊}一個簡易的滾動條就有了：
雖然比瀏覽器默認的滾動條好不到哪兒去，不過你可以自由發揮，把GIF動圖作為滾動條也是可以的。由于滾動條是 absolute 定位的，后面就通過 top 屬性來控制滾動條的位置。
現在滾動條還是靜態的，想要讓他動起來，就要先了解下滾動條與文檔滾動的關系。
2. 滾動條與文檔滾動的關系
先看這張圖
藍色框代表一個很長的文檔，文檔的高度可以通過 scrollHeight 屬性獲得。
屏幕一下子顯示不了那么多內容，只能顯示紅色區域部分，紅色區域就稱為”視口“（Viewport），視口的高度可以通過 offsetHeight 屬性獲得。
頁面剛加載時，視口的頂部和文檔頂部是重合的，滾動條（綠色豎條）也在最頂部。當我們將滾動條下拉時，文檔的內容在向上滾動，其實是視口在向下移動：
視口向下移動后，與文檔頂部就有了個偏移，這個偏移可以通過 scrollTop 獲得。視口下移的同時，滾動條與頂部也有一段距離了，暫且用 h 表示。
視口里文檔頂部的最大距離可以是多少？根據圖可以看出是 scrollHeight - offsetHeight；類似地，滾動條最大可以滾動的距離是 offsetHeight - barHeight，其中 barHeight 是滾動條本身的高度。
看到這里你是否有些明白了，滾動條滾動的距離，與文檔視口離開頂部的距離是成一定比例的。滾動條滑動多少距離，文檔視口就按比例滑動多少距離。而這個比例值就等于：
ratio = (scrollHeight - offsetHeight) / (offsetHeight - barHeight)
假設文檔總長 5000px，視口高度1080px，滾動條滑塊高 40px，那么根據公式計算出比例值是 3.77。也就是說，滾動條每滾動 1px，視口就要下移 3.77px
利用這個比例值，我們就可以讓滾動條和視口等比例地進行滑動了。
3. 通過JavaScript控制滾動條
在自制的滾動條中，滾動通過兩種事件觸發，我們需要自己處理事件：
3.1 鼠標滾輪事件
鼠標滾輪滾動時，會觸發 mousewheel 事件，此時需要根據滾動增量（e.deltaY）更新視口位置，在根據新的視口位置推算出滾動條的位置。代碼：
container.addEventListener('mousewheel', function(e) { this.scrollTop += e.deltaY; this.scrollbar.style.top = (this.scrollTop + this.scrollTop / this.ratio) + 'px';});可以看到，滾動條的 top 值就是當前視口的偏移（scrollTop）加上這個偏移的按比例縮小。
3.2 鼠標拖拽事件
JavaScript 原生沒有拖拽事件，需要用左鍵點下（mousedown），鼠標移動（mousemove），左鍵放開（mouseup）三個事件配合模擬出拖拽效果：
container.addEventListener('mousedown', function (e) { if (e.target === this.scrollbar) { this.prevY = e.pageY; }});container.addEventListener('mouseup', function (e) { this.prevY = null;});container.addEventListener('mousemove', function (e) { if (this.prevY) { // 此時可以確定用戶在表示拖拽 } e.preventDefault();});上面的代碼在處理 mousemove 事件時使用 e.preventDefault() 阻止瀏覽器默認動作，您可以自行嘗試加上和不加這行的效果。接著上面的代碼，我們處理拖拽動作：
if (this.prevY) { // 此時可以確定用戶在表示拖拽 this.scrollTop += (e.pageY - this.prevY) * this.ratio; this.scrollbar.style.top = (this.scrollTop + this.scrollTop / this.ratio) + 'px'; this.prevY = e.pageY;}與滾輪滾動不同，JavaScript沒有給出每次拖拽的移動增量，需要自己計算，并每次存儲上一次的鼠標位置。
至此一個可用的自制滾動條就完成了。
完整代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html, body, #container { height: 100%; margin: 0; } #container { padding: 2rem; box-sizing: border-box; overflow-y: hidden; position: relative; padding-right: 30px; } .scrollbar { height: 166px; width: 20px; border-radius: 20px; background: #ccc; position: absolute; right: 0; } </style> <script> window.onload = function () { var scrollbar = document.querySelector('.scrollbar'); var container = scrollbar.parentNode; container.scrollbar = scrollbar; container.ratio = (container.scrollHeight - container.offsetHeight) / (container.offsetHeight - scrollbar.offsetHeight); container.addEventListener('mousewheel', function(e) { this.scrollTop += e.deltaY; this.scrollbar.style.top = (this.scrollTop + this.scrollTop / this.ratio) + 'px'; }); container.addEventListener('mousedown', function (e) { if (e.target === this.scrollbar) { this.prevY = e.pageY; } }); container.addEventListener('mouseup', function (e) { this.prevY = null; }); container.addEventListener('mousemove', function (e) { if (this.prevY) { this.scrollTop += (e.pageY - this.prevY) * this.ratio; this.scrollbar.style.top = (this.scrollTop + this.scrollTop / this.ratio) + 'px'; this.prevY = e.pageY; } e.preventDefault(); }); } </script></head><body> <div id="container"> <div class="scrollbar"></div> bla, bla, bla... 一大段很長的文字 </div></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
