優雅而酷炫的自定義CSS滾動條

本文中，我們將深入了解滾動條的世界。我知道，這聽起來不太迷人，但相信我，精心設計的頁面與匹配的滾動條齊頭并進。老式的鍍鉻滾動條只是不適合那么多。

我們將研究滾動條的細節，然后看看一些很酷的例子。

滾動條的組成部分

要設置滾動條的樣式，您需要熟悉滾動條的解剖結構。請看這張圖：

這里要記住的兩個主要組成部分是：

scrollbar track是滾動條下方的背景。
scrollbar humb是用戶單擊和拖動的部分。

我們可以使用供應商前綴：：-webkit-scrollbar 選擇器更改完整滾動條的屬性。我們可以給滾動條一個固定的寬度、背景顏色、圓角......很多事情！如果我們自定義頁面的主滾動條，那么我們可以直接在 HTML 元素上使用：：-webkit-scrollbar：

html::-webkit-scrollbar {
  /* Style away! */
}

如果我們自定義一個滾動框，這是溢出的結果：滾動，那么我們可以在該元素上使用：：-webkit-scrollbar：

.element::-webkit-scrollbar {
  /* Style away! */
}

下面是一個快速示例，它設置 HTML 元素滾動條的樣式，使其寬，背景為紅色：

如果我們只想更改滾動條的thumb或track怎么辦？你猜對了——我們分別為這兩個元素提供了特殊的前綴偽元素：：：-webkit-scrollbar-thumb 和：：-webkit-scrollbar-track。以下是我們將所有這些東西放在一起時可能實現的想法：

向您展示三個度的自定義滾動條樣式，然后打開一個從網絡上提取示例的大型展示，以獲取靈感。

簡單而優雅的滾動條

自定義滾動條仍然可以是最小的。我整理了一組示例，這些示例巧妙地改變了外觀，無論是對拇指或軌道進行輕微的顏色更改，還是對背景進行一些淺色造型。

如您所見，在滾動條樣式方面，我們不必發瘋。有時，只需進行細微的更改即可通過與整體主題匹配的滾動條來增強整體用戶體驗.

html::-webkit-scrollbar{
  width: 50px;
  background:red;
}

如果我們只想更改滾動條的拇指或軌道怎么辦？你猜對了——我們分別為這兩個元素提供了特殊的前綴偽元素：：：-webkit-scrollbar-thumb 和：：-webkit-scrollbar-track。以下是我們將所有這些東西放在一起時可能實現的想法：

html::-webkit-scrollbar {
  width: 30px;
}
 
html::-webkit-scrollbar-track {
  background: black;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
html::-webkit-scrollbar-thumb {
  background: red;
  border: 3px solid blue;
}

向您展示三個度的自定義滾動條樣式，然后打開一個從網絡上提取示例的大型展示，以獲取靈感。

簡單而優雅的滾動條

.container {
            display: flex;
            margin: 50px;
            column-gap: 20px;
        }
        
        .scrollbar {
            height: 300px;
            width: 50%;
            overflow: auto;
            padding: 0 10px;
        }
        /*       ScrollBar 1        */
        
        #scrollbar1::-webkit-scrollbar {
            width: 10px;
        }
        
        #scrollbar1::-webkit-scrollbar-track {
            border-radius: 8px;
            background-color: #e7e7e7;
            border: 1px solid #cacaca;
        }
        
        #scrollbar1::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background-color: #d55959;
        }
        /*       ScrollBar 2        */
        
        #scrollbar2::-webkit-scrollbar {
            width: 12px;
        }
        
        #scrollbar2::-webkit-scrollbar-track {
            border-radius: 8px;
            background-color: #e7e7e7;
            border: 1px solid #cacaca;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        }
        
        #scrollbar2::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background-color: #363636;
        }
        /*        ScrollBar 3    */
        
        #scrollbar3::-webkit-scrollbar {
            width: 12px;
        }
        
        #scrollbar3::-webkit-scrollbar-track {
            background-color: #e7e7e7;
            border: 1px solid #cacaca;
        }
        
        #scrollbar3::-webkit-scrollbar-thumb {
            background-color: #060b9a;
        }
        /*        ScrollBar 4    */
        
        #scrollbar4::-webkit-scrollbar {
            width: 12px;
        }
        
        #scrollbar4::-webkit-scrollbar-track {
            background-color: transparent;
            border: 1.5px solid #7e7e7e;
            border-radius: 8px;
        }
        
        #scrollbar4::-webkit-scrollbar-thumb {
            background-color: #f1f1f1;
            border: 2px solid #616161;
            border-radius: 8px;
        }
        /*        ScrollBar 5    */
        
        #scrollbar5::-webkit-scrollbar {
            background-color: #000;
            width: 12px;
            border-radius: 10px;
        }
        
        #scrollbar5::-webkit-scrollbar-track {
            border-radius: 10px;
            box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
        }
        
        #scrollbar5::-webkit-scrollbar-thumb {
            background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.5, #a520ca), color-stop(1, #2681cc));
            border-radius: 10px;
        }
        /*       ScrollBar 6        */
        
        #scrollbar6::-webkit-scrollbar {
            width: 12px;
        }
        
        #scrollbar6::-webkit-scrollbar-track {
            border-radius: 8px;
            background-color: #95a5a6;
            border: 1px solid #cacaca;
        }
        
        #scrollbar6::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background-color: #2c3e50;
        }

如您所見，在滾動條樣式方面，我們不必發瘋。有時，只需進行細微的更改即可通過與整體主題匹配的滾動條來增強整體用戶體驗。

看個錨點定位的例子

發現頁面唰的一些就到頂部了，快到我們懵逼了。。。

開始解決

scroll-behavior

CSS屬性 scroll-behavior 為一個滾動框指定滾動行為，其他任何的滾動，例如那些由于用戶行為而產生的滾動，不受這個屬性的影響。在根元素中指定這個屬性時，它反而適用于視窗。

scroll-behavior:smooth 寫在滾動容器元素上，可以讓容器的滾動變得平滑。

在網頁默認滾動是在<html>標簽上，移動端大多數在<body>標簽上。

我們可以這樣加：

html, 
body { scroll-behavior:smooth; }

加了以后的效果如下：

這是錄制的GIF圖，效果沒那么好。大家可以動手試一下，滑動體驗非常不錯。

缺點

兼容性不夠好

當然我們可以通過js來做個類似

Element.scrollIntoView() 方法

DOM元素的scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內，通過觸發滾動容器的定位實現。

DOM元素的scrollIntoView()方法是原生JS 兼容到IE6，兼容性非常好。

參數如下

{
 behavior: "auto" | "instant" | "smooth", // 默認 auto
 block: "start" | "center" | "end" | "nearest", // 默認 center
 inline: "start" | "center" | "end" | "nearest", // 默認 nearest
}

解釋一下這三個參數：

behavior 表示滾動方式。auto 表示使用當前元素的 scroll-behavior 樣式。instant 和 smooth 表示直接滾到底和使用平滑滾動。
block 表示塊級元素排列方向要滾動到的位置。對于默認的 writing-mode: horizontal-tb 來說，就是豎直方向。start 表示將視口的頂部和元素頂部對齊；center 表示將視口的中間和元素的中間對齊；end 表示將視口的底部和元素底部對齊；nearest 表示就近對齊。
inline 表示行內元素排列方向要滾動到的位置。對于默認的 writing-mode: horizontal-tb 來說，就是水平方向。其值與 block 類似。

用法：

html:

<div class="wrap">
 <div onClick="onScrollIntoView()">點擊讓黑色塊到頂部</div>
 <ul class="body">
 <li>1</li>
 <li>2</li>
 <li id="box">我是黑色</li>
 <li>3</li>
 <li>4</li>
 </ul>
</div>

js:

function onScrollIntoView () {
 var element=document.getElementById("box");
 element.scrollIntoView({behavior: "smooth"});
}

效果：

這回大家再也不用害怕做錨點定位啦。

最后我們在說一個關于頁面滾動問題吧，那就是 返回頂部 功能實現

返回頂部功能實現

我們常用定時器 setInterval 來不斷減去高度。

如：當前距離頂部 1000，我們每10毫秒減50，

var timer=setInterval(function() { // 定時器 每10毫秒執行一次
 // 頂部距離 document.body.scrollTop=1000 
 var speed=50 // 返回頂部速度 
 document.body.scrollTop=document.body.scrollTop - speed
 if (document.body.scrollTop===0) { // 返回到達頂部后， 銷毀定時器
 clearInterval(timer)
 }
}, 10)

效果：

大家會發現，頁面返回是滾動起來很干。沒10毫秒減50. 很平均，在交互上效果并不好。

借鑒上面 scroll-behavior:smooth 的交互效果。緩動的返回頂部。

改一下計算方式：1000/2=500, 500/2=250, 250/2=...... 這樣滑動起來是不是就平滑了呢？

換算成公式：開始位置=開始位置 + (結束位置 - 開始位置) / 速度

document.body.scrollTop=1000 + (0 - 1000) / 2

公式太煩了還是上代碼吧：

var onTop=function (a, b, c, d) {
 if (a==b || typeof a !='number') {
 return
 }
 b=b || 0
 c=c || 2
 
 var speed=function () {
 a=a + (b - b) / c
 
 if (a < 1) {
 d(b, true)
 return
 }
 d(a, false)
 requestAnimationFrame(speed)
 }
 speed()
}

a 開始位置
b 結束位置
c 速度
d 位置回調，d(當前的位置值, 否動畫結束)

調用：

var target=document.body.scrollTop ? document.body : document.documentElement
onTop(target.scrollTop, 0, 4, function (value) {
 target.scrollTop=value
})

效果：

Ps: gif錄制效果不好，大家可以動手寫一下DEMO

裝GoFullPage之類的截圖插件也可以實現滾動截圖，不過插件的截圖效率肯定不如瀏覽器自帶的工具，而且安裝插件對于瀏覽器的內存占用，網頁加載等多少會有點影響。

那么不安裝插件，Chrome瀏覽器如何實現滾動截圖？

以前Chrome網頁滾動截圖可以用開發者工具里的Capture full size screenshot命令，而現在這個命令搜不到了。

實際上新版本的Chrome把這個截圖命令移到了可視化界面中，并且現在可以設置快捷鍵，使用起來比之前更方便。

首先還是打開開發者工具，然后找到“設置”；

在設置窗口的左側導航最下邊找到“快捷鍵”，右側往下翻，找到“屏幕截圖”，這里就可以對4中截圖命令設置快捷鍵。

使用的時候，還是要先打開開發者工具這個窗口，然后用設置好的快捷鍵快速實現網頁滾動截圖。

Chrome瀏覽器開發者工具是一款非常強大且易于使用的前端開發工具。其優點包括但不限于以下幾點：

實時編輯：可以直接在瀏覽器中編輯HTML、CSS和JavaScript代碼，并且頁面可以實時更新。

調試JavaScript代碼：提供了豐富的調試工具，比如斷點、監控變量、堆棧跟蹤等，方便我們快速定位和解決JavaScript代碼問題。

查看元素：您可以輕松查看元素的樣式、盒模型、事件等。您可以快速了解頁面結構，還可以修改樣式以達到設計效果。

網絡分析：提供網絡面板，方便查看網絡請求、響應狀態碼、傳輸大小等信息，以及網絡請求的時間線圖表。

性能分析：提供性能面板，可以幫助我們分析頁面加載性能、資源優化建議等，幫助我們提高頁面性能。

在線咨詢

上一篇：用戶界面框架jQuery EasyUI示例大全之Da
下一篇：js的基礎知識必備

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

優雅而酷炫的自定義CSS滾動條

滾動條的組成部分

簡單而優雅的滾動條

簡單而優雅的滾動條

scroll-behavior

缺點

Element.scrollIntoView() 方法

返回頂部 功能實現

您的項目需求

返回頂部功能實現