怎么使用div實現(xiàn)自制滾動條-創(chuàng)新互聯(lián)

這篇文章將為大家詳細講解有關怎么使用div實現(xiàn)自制滾動條，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)自2013年起，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都網(wǎng)站制作、成都網(wǎng)站建設網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元太湖做網(wǎng)站,已為上家服務,為太湖各地企業(yè)和個人服務,聯(lián)系電話:18982081108

滾動條是瀏覽器中最常見的組件了。然而，滾動條的顏值總是不能令人滿意，特別是嵌入在頁面中的滾動條:

怎么使用div實現(xiàn)自制滾動條

漂亮的網(wǎng)頁突然出現(xiàn)一根灰灰的滾動條真是太煞風景了。雖然瀏覽器也提供了一些偽類能改善滾動條的外觀，但改善程度也是有限。為什么不自己用 div 實現(xiàn)一根萌萌的滾動條呢，比如這根：

怎么使用div實現(xiàn)自制滾動條

貪吃蛇滾動條

今天就來講講如何用 div 自己實現(xiàn)滾動條。

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時不增加元素本身高度，避免出現(xiàn)滾動條
    overflow-y: hidden; // 隱藏瀏覽器本身的滾動條
    position: relative;
    padding-right: 30px; // 給自制滾動條留點空間，不要其他內容重合了
}
.scrollbar {
    height: 166px;
    width: 20px;
    border-radius: 20px;
    background: #ccc;
    position: absolute; // 絕對定位，方便設置滾動條位置
    right: 0; // 設置滾動條在最右邊
}

一個簡易的滾動條就有了：

怎么使用div實現(xiàn)自制滾動條

雖然比瀏覽器默認的滾動條好不到哪兒去，不過你可以自由發(fā)揮，把GIF動圖作為滾動條也是可以的。由于滾動條是 absolute 定位的，后面就通過 top 屬性來控制滾動條的位置。

現(xiàn)在滾動條還是靜態(tài)的，想要讓他動起來，就要先了解下滾動條與文檔滾動的關系。

2. 滾動條與文檔滾動的關系

先看這張圖

怎么使用div實現(xiàn)自制滾動條

藍色框代表一個很長的文檔，文檔的高度可以通過 scrollHeight 屬性獲得。

屏幕一下子顯示不了那么多內容，只能顯示紅色區(qū)域部分，紅色區(qū)域就稱為”視口“（Viewport），視口的高度可以通過 offsetHeight 屬性獲得。

頁面剛加載時，視口的頂部和文檔頂部是重合的，滾動條（綠色豎條）也在最頂部。當我們將滾動條下拉時，文檔的內容在向上滾動，其實是視口在向下移動：

怎么使用div實現(xiàn)自制滾動條

視口向下移動后，與文檔頂部就有了個偏移，這個偏移可以通過 scrollTop 獲得。視口下移的同時，滾動條與頂部也有一段距離了，暫且用 h 表示。

視口里文檔頂部的較大距離可以是多少？根據(jù)圖可以看出是 scrollHeight - offsetHeight；類似地，滾動條較大可以滾動的距離是 offsetHeight - barHeight，其中 barHeight 是滾動條本身的高度。

看到這里你是否有些明白了，滾動條滾動的距離，與文檔視口離開頂部的距離是成一定比例的。滾動條滑動多少距離，文檔視口就按比例滑動多少距離。而這個比例值就等于：

ratio = (scrollHeight - offsetHeight) / (offsetHeight - barHeight)

假設文檔總長 5000px，視口高度1080px，滾動條滑塊高 40px，那么根據(jù)公式計算出比例值是 3.77。也就是說，滾動條每滾動 1px，視口就要下移 3.77px

利用這個比例值，我們就可以讓滾動條和視口等比例地進行滑動了。

3. 通過JavaScript控制滾動條

在自制的滾動條中，滾動通過兩種事件觸發(fā)，我們需要自己處理事件：

  1. 鼠標滾輪滾動時，更新視口位置，同時按比例更新滾動條的位置

  2. 鼠標拖拽滾動條時，更新滾動條位置，同時按比例更新視口位置

3.1 鼠標滾輪事件

鼠標滾輪滾動時，會觸發(fā) mousewheel 事件，此時需要根據(jù)滾動增量（e.deltaY）更新視口位置，在根據(jù)新的視口位置推算出滾動條的位置。代碼：

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實現(xiàn)自制滾動條”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

文章名稱：怎么使用div實現(xiàn)自制滾動條-創(chuàng)新互聯(lián)
URL分享：http://muchs.cn/article38/cdsspp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站維護、微信公眾號、網(wǎng)站設計公司、外貿網(wǎng)站建設、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

手機網(wǎng)站建設