CSS滾動條樣式

一、CSS滾動條樣式修改

CSS滾動條樣式可以通過修改瀏覽器默認的滾動條樣式，來實現自定義的效果。在CSS中，我們可以使用以下偽類來選中滾動條：

::-webkit-scrollbar          /* Safari 和 Chrome 等Webkit引擎的瀏覽器 */
::-moz-scrollbar             /* Firefox 等Gecko引擎的瀏覽器 */
::-ms-scrollbar              /* IE10+ */

針對不同瀏覽器的滾動條樣式，可以有不同的自定義方式。比如，針對webkit瀏覽器，可以使用以下屬性進行修改：

::-webkit-scrollbar {
    width: 10px;               /* 滾動條的寬度 */
    height: 100px;             /* 滾動條的高度 */
}
 
::-webkit-scrollbar-thumb {
    background-color: #666;    /* 滾動條滑塊的背景顏色 */
    border-radius: 10px;       /* 滾動條滑塊的邊框圓角半徑 */
}
 
::-webkit-scrollbar-track {
    background-color: #eee;    /* 滾動條軌道的背景顏色 */
}

其他瀏覽器的滾動條，也可以通過類似的方式進行修改。這種方式的優點是可以減少使用JS或插件的依賴，同時自定義CSS樣式效果也更加靈活。

二、CSS好看的滾動條樣式

通過CSS樣式的自定義，我們可以實現更好看的滾動條樣式。比如，可以將滾動條滑塊的背景顏色設置為漸變色，可以看起來更加美觀。

::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #ff00ff, #00ffff);
    border-radius: 10px;
}

除了漸變色之外，還可以使用圖像作為滾動條滑塊的背景，比如：

::-webkit-scrollbar-thumb {
    background-image: url("scrollbar-thumb.png");
    background-size: cover;
    border-radius: 10px;
}

三、Vue滾動條樣式

在Vue中，可以使用vue-scrollbar插件來實現滾動條樣式的自定義。該插件基於原生的滾動條，不需要任何依賴，使用起來很方便。

該插件支持的滾動條樣式有：

顏色主題（白色/黑色）
滑塊顏色
滑塊寬度和高度
滑塊圓角

使用該插件的代碼示例：


  
    
  



import VueScrollbar from 'vue-scrollbar'

export default {
  components: {
    VueScrollbar
  }
}



.vue-scrollbar-wrapper {
  /* 這裡是自定義滾動條樣式 */
}

四、CSS橫向滾動條樣式

CSS橫向滾動條樣式可以用於橫向滾動的內容，比如水平方向的菜單、輪播圖等。與豎向滾動條類似，我們也可以使用CSS對橫向滾動條進行自定義。

.horizontal-scrollbar {
    overflow-x: auto;
    white-space: nowrap;        /* 禁止換行 */
}
 
.horizontal-scrollbar::-webkit-scrollbar {         
    height: 10px !important;   /* 滾動條的寬度 */
}
 
.horizontal-scrollbar::-webkit-scrollbar-thumb {
    background-color: #999;    /* 滾動條滑塊的背景顏色 */
    border-radius: 10px;       /* 滾動條滑塊的邊框圓角半徑 */
}
 
.horizontal-scrollbar::-webkit-scrollbar-track {
    background-color: #eee;    /* 滾動條軌道的背景顏色 */
}

五、滾動條樣式設置

除了上面介紹的方式之外，還可以使用一些插件或類庫來實現滾動條樣式的自定義。比如，使用jquery.nicescroll插件：

jQuery NiceScroll Plugin - Demo

body {
height: 1000px;
}

Scroll Down / Up / Left / Right to see effect

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

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