溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關怎么使用div實現自制滾動條，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
滾動條是瀏覽器中最常見的組件了。然而，滾動條的顏值總是不能令人滿意，特別是嵌入在頁面中的滾動條:
漂亮的網頁突然出現一根灰灰的滾動條真是太煞風景了。雖然瀏覽器也提供了一些偽類能改善滾動條的外觀，但改善程度也是有限。為什么不自己用 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>關于“怎么使用div實現自制滾動條”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
