css設(shè)置滾動(dòng)條寬度的方法

這篇文章主要介紹css設(shè)置滾動(dòng)條寬度的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

css設(shè)置滾動(dòng)條寬度的方法：首先使用【::-webkit-scrollbar】偽類(lèi)選擇器設(shè)置滾動(dòng)條樣式；然后在該偽類(lèi)選擇器中通過(guò)width屬性設(shè)置滾動(dòng)條寬度即可。

方法思路如下：

在CSS中使用::-webkit-scrollbar偽類(lèi)選擇器來(lái)設(shè)置滾動(dòng)條樣式，并在此偽類(lèi)選擇器中通過(guò)width屬性設(shè)置滾動(dòng)條的寬度。

::-webkit-scrollbar CSS偽類(lèi)選擇器影響了一個(gè)元素的滾動(dòng)條的樣式。

你可以使用以下偽元素選擇器去修改各式webkit瀏覽器的滾動(dòng)條樣式:

::-webkit-scrollbar — 整個(gè)滾動(dòng)條

::-webkit-scrollbar-button — 滾動(dòng)條上的按鈕 (上下箭頭)

::-webkit-scrollbar-thumb — 滾動(dòng)條上的滾動(dòng)滑塊

::-webkit-scrollbar-track — 滾動(dòng)條軌道

::-webkit-scrollbar-track-piece — 滾動(dòng)條沒(méi)有滑塊的軌道部分

::-webkit-scrollbar-corner — 當(dāng)同時(shí)有垂直滾動(dòng)條和水平滾動(dòng)條時(shí)交匯的部分

::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動(dòng)按鈕)

實(shí)現(xiàn)代碼：

.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;  
  height: 2em;
  }
  .invisible-scrollbar::-webkit-scrollbar {
  display: none;
  }
  /* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
 .mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;  
  height: 8px;  
  background-color: #aaa; 
  /* or add it to the track */}/* Add a thumb */
  .mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000; 
    }

以上是“css設(shè)置滾動(dòng)條寬度的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！