柚子快報激活碼778899分享：前端 css滾動條樣式指南
柚子快報激活碼778899分享：前端 css滾動條樣式指南
css滾動條樣式指南
滾動條是網(wǎng)頁設(shè)計中經(jīng)常被忽視的元素。雖然它看起來像是一個小細(xì)節(jié)，但它在網(wǎng)站導(dǎo)航中起著至關(guān)重要的作用。默認(rèn)的滾動條可能看起來不合適，有損整體美觀。本文將介紹如何使用 CSS 自定義滾動條。
在 Chrome、Edge 和 Safari 中設(shè)置滾動條樣式
Webkit 瀏覽器允許使用偽元素（如:: -webkit-scrollbar、::-webkit-scrollbar-button、::-webkit-scrollbar-thumb、::-webkit-scrollbar-track等）設(shè)置滾動條樣式。其中每一個都針對滾動條的不同部分。下面使用上面的偽元素的樣式化滾動條的示例：
.container {
width: 400px;
height: 300px;
margin: 30px auto;
box-shadow: 0 0 2px gray;
padding: 20px;
overflow: scroll;
}
.scroll {
width: 1400px;
height: 1300px;
}
.container::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.container::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom right, #4d7fff 0%, #1a56ff 100%);
border-radius: 5px;
}
.container::-webkit-scrollbar-track {
background-color: #ddd;
border: 1px solid #ccc;
}
.container::-webkit-scrollbar-button {
background-color: #4d7fff;
border-radius: 5px;
}
.container::-webkit-scrollbar-button:hover {
background-color: #999999;
}
在上面的代碼中，我們顯示了垂直和水平滾動條，但在大多數(shù)情況下，我們只顯示一個。為此，我們可以將負(fù)責(zé)滾動條可見性的overflow屬性修改為overflow-x 或overflow-y，具體取決于我們將顯示滾動條的軸。
滾動條偽類選擇器
要創(chuàng)建更加自定義的設(shè)計，我們可以針對滾動條的特定元素，并通過向每個偽元素添加偽類。以下是一些最常見的偽類：
:horizontal：用于設(shè)置與垂直滾動條不同的水平滾動條樣式。例如，您可以為水平滾動條設(shè)置不同的寬度或顏色:vertical：用于設(shè)置垂直滾動條與水平滾動條不同的樣式:decrement：適用于滾動條開頭的箭頭按鈕。它用于設(shè)置遞減按鈕或垂直滾動??條的向上箭頭和水平滾動條的向左箭頭的樣式:increment：適用于滾動條末端的箭頭按鈕。它用于設(shè)置增量按鈕或垂直滾動??條的向下箭頭和水平滾動條的向右箭頭的樣式:start：適用于滾動條的第一個按鈕和第一個軌道部分，分別位于垂直或水平滾動條的頂部或左側(cè):end：適用于滾動條的最后一個軌道，分別位于垂直或水平滾動條的底部或右側(cè)
下面是一個使用上面所有偽類的示例：
.scroll {
width: 1400px;
height: 1300px;
}
.container {
width: 400px;
height: 300px;
margin: 30px auto;
box-shadow: 0 0 2px gray;
padding: 20px;
overflow: scroll;
}
/* Define the scrollbar style */
.container::-webkit-scrollbar {
width: 15px;
height: 15px;
}
/* Define the thumb style */
.container::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom right, #4d7fff 0%, #1a56ff 100%);
border-radius: 5px;
}
/* Define the track style */
.container::-webkit-scrollbar-track {
background-color: #ddd;
border: 10px solid #ccc;
}
/* Style the beginning section of the scrollbar track */
.container::-webkit-scrollbar-track-piece:vertical:start {
background-color: #4d7fff;
}
/* Style the end section of the scrollbar track */
.container::-webkit-scrollbar-track-piece:vertical:end {
background-color: green;
}
/* Define the button style */
.container::-webkit-scrollbar-button:vertical {
background-color: #4d7fff;
background-repeat: no-repeat;
background-size: 50%;
background-position: center;
}
.container::-webkit-scrollbar-button:vertical:decrement {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z'%3E%3C/path%3E%3C/svg%3E");
}
.container::-webkit-scrollbar-button:vertical:increment {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");
}
/* Define the button style when being hovered over */
.container::-webkit-scrollbar-button:hover {
background-color: #999999;
}
在 Firefox 中設(shè)置滾動條樣式
Firefox 不提供任何像 Webkit 瀏覽器那樣的高級樣式方法，只有scrollbar-width和scrollbar-color可用。
body {
scrollbar-width: thin;
scrollbar-color: #4d7fff #ddd;
}
``
## 設(shè)計滾動條以獲得更多跨瀏覽器支持
在設(shè)置滾動條樣式時，建議結(jié)合 `Webkit` 和 `W3C CSS Scrollbars` 規(guī)范以覆蓋更多瀏覽器：
```css
body {
scrollbar-width: thin;
scrollbar-color: #4d7fff #ddd;
}
body::-webkit-scrollbar {
width: 10px;
height: 10px;
}
body::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom right, #4d7fff 0%, #1a56ff 100%);
border-radius: 5px;
}
body::-webkit-scrollbar-track {
background-color: #ddd;
border: 1px solid #ccc;
}
body::-webkit-scrollbar-button {
background-color: #4d7fff;
border-radius: 5px;
}
柚子快報激活碼778899分享：前端 css滾動條樣式指南
精彩文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
FaceShop國際顏值購
