CSS修改滾動條

一、CSS修改滾動條的樣式

修改滾動條的樣式可以通過CSS的::-webkit-scrollbar偽元素或者 scrollbar-width 屬性實現。以下是單獨使用::-webkit-scrollbar的示例：

/* 隱藏滾動條 */
::-webkit-scrollbar {
    display: none;
}

/* 修改滾動條背景色 */
::-webkit-scrollbar {
    background-color: #F5F5F5;
}

/* 修改滾動條寬度 */
::-webkit-scrollbar {
    width: 12px;
}

/* 修改滾動條滑塊顏色 */
::-webkit-scrollbar-thumb {
    background-color: #999;
}

以上代碼中，::-webkit-scrollbar代表整個滾動條，::-webkit-scrollbar-thumb代表滑塊，可以通過這兩個偽元素完成滾動條的樣式修改。如需同時修改滾動條樣式和滑塊樣式，可以參考以下示例：

/* 修改滾動條和滑塊背景顏色 */
::-webkit-scrollbar {
    background-color: #F5F5F5;
    width: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: #999;
}

二、CSS改變滾動條顏色

在修改滾動條樣式的基礎上，可以使用CSS的color屬性來進一步改變滾動條的顏色。以下是示例代碼：

/* 改變滾動條顏色 */
::-webkit-scrollbar {
    background-color: #F5F5F5;
    width: 12px;
    color: #999;
}

其中color屬性用於修改滾動條的前景色，即滑塊的顏色。

三、修改滾動條樣式

除了修改顏色以外，還可以通過background-image等屬性來修改滾動條的樣式，例如：

/* 改變滾動條樣式 */
::-webkit-scrollbar {
    background-color: #F5F5F5;
    width: 12px;
    background-image: -webkit-linear-gradient(#fff, #ddd);
}

這裡使用了background-image屬性和-webkit-linear-gradient屬性值，將滾動條的背景設為一個漸變色。

四、CSS修改滾動條的位置

修改滾動條的位置可以分為兩種情況，一種是垂直滾動條，另一種是水平滾動條。

對於垂直滾動條，可以使用CSS的::-webkit-scrollbar-track-piece偽元素來實現。以下是示例代碼：

/* 修改垂直滾動條位置 */
::-webkit-scrollbar-track-piece {
    width: 12px;
    background-color: #F5F5F5;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

以上代碼中，通過將::-webkit-scrollbar-track-piece設為絕對定位，並設置right、top和bottom屬性，將滾動條放置於右側。

對於水平滾動條，同樣可以使用::-webkit-scrollbar-track-piece偽元素，只需要將屬性值設置為bottom、left和right即可。以下是示例代碼：

/* 修改水平滾動條位置 */
::-webkit-scrollbar-track-piece {
    height: 12px;
    background-color: #F5F5F5;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
}

五、CSS加滾動條

有時，我們需要的是在沒有滾動條的情況下添加一個滾動條。這可以通過使用CSS3的overflow屬性和::-webkit-scrollbar偽元素來實現。以下是示例代碼：

/* 添加滾動條 */
div {
    height: 200px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

/* 修改滾動條樣式 */
div::-webkit-scrollbar {
    width: 12px;
}

div::-webkit-scrollbar-thumb {
    background-color: #999;
}

以上代碼中，首先通過overflow屬性將元素設為可滾動，並通過-webkit-overflow-scrolling: touch;提高移動設備上滾動的流暢度。然後，通過標籤選擇器和::-webkit-scrollbar偽元素來修改滾動條的樣式。

六、CSS修改滾動條放在屏幕的下方

有時，為了更好地適應頁面布局，我們希望將滾動條放置在屏幕底部，以下是示例代碼：

/* 將滾動條放在屏幕底部 */
::-webkit-scrollbar {
    position: fixed;
    z-index: 100;
    bottom: 0;
    width: 100%;
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: #999;
}

以上代碼中，將::-webkit-scrollbar設為固定定位，並將bottom屬性設為0，即可將滾動條放置在屏幕底部。同時，通過設置z-index屬性，可以避免滾動條被其它元素遮擋。

七、火狐CSS修改滾動條樣式

除了webkit內核的瀏覽器，火狐也提供了修改滾動條樣式的方法，只需要使用::-moz-scrollbar偽元素即可。以下是示例代碼：

/* 修改火狐滾動條樣式 */
div::-moz-scrollbar {
    width: 12px;
}

div::-moz-scrollbar-thumb {
    background-color: #999;
}

八、CSS修改滾動條靜止的時候隱藏

有時，我們希望在滾動停止時隱藏滾動條，可以使用<body>元素的scroll事件和CSS的visibility屬性來實現，以下是示例代碼：

/* 隱藏滾動條 */
body::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    visibility: hidden;
}

body::-webkit-scrollbar-thumb {
    background-color: #999;
}

/* 顯示滾動條 */
body.scroll-finished::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    visibility: visible;
}

以上代碼中，首先將::-webkit-scrollbar和::-webkit-scrollbar-thumb的visibility屬性設為hidden，當滾動停止時，通過<body>元素的scroll事件將其設為visible即可。

九、CSS修改滾動條位置現是在指定位置

有時，我們需要將滾動條放置在頁面的特定位置，這可以通過設置滾動容器的padding屬性來實現。以下是示例代碼：

/* 在指定位置放置滾動條 */
div {
    height: 200px;
    overflow: scroll;
    padding-right: 12px;
}

div::-webkit-scrollbar {
    width: 12px;
}

div::-webkit-scrollbar-thumb {
    background-color: #999;
}

以上代碼中，通過設置div元素的padding-right屬性，將滾動條放置在容器的右側。注意，padding-right的值應該與::-webkit-scrollbar的width屬性相等。

十、CSS滾動條樣式選取

除了以上介紹的幾種滾動條樣式以外，還有很多種滾動條樣式可供選擇。以下是選取的三種滾動條樣式：

1、仿Mac OS滾動條樣式

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #fff;
}

::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #ccc;
    -webkit-box-shadow: inset 0 0 0 1px #fff;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #999;
    -webkit-box-shadow: inset 0 0 0 1px #fff;
}

2、iOS滾動條樣式

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb:vertical {
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:horizontal {
    border-radius: 3px;
}

3、自定義滾動條樣式

::-webkit-scrollbar {
    width: 8px;
    background-color: #fff;
}

::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 0 1px #fff;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #999;
    -webkit-box-shadow: inset 0 0 0 1px #fff;
}

::-webkit-scrollbar-thumb:active {
    background-color: #666;
}

以上是使用webkit內核瀏覽器的示例，對於其他瀏覽器，可以調整對應樣式實現滾動條的修改。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/253529.html