css怎麼設定滾動條寬度

css中可利用「::-webkit-scrollbar」選擇器和width屬性來設定捲軸寬度，語法為「::-webkit-scrollbar{width:寬度值;}」；此選擇器用於選取整個捲軸，而width屬性用於為選取的元素設定寬度。

本教學操作環境：windows10系統、CSS3&&HTML5版、thinkpad t480電腦。

方法想法如下：

在CSS中使用::-webkit-scrollbar偽類選擇器來設定捲軸樣式，並在此偽類選擇器中透過width屬性設定捲軸的寬度。

::-webkit-scrollbar CSS偽類別選擇器影響了一個元素的捲軸的樣式。

你可以使用以下偽元素選擇器去修改各式webkit瀏覽器的捲軸樣式:

::-webkit-scrollbar — 整個捲軸

:: -webkit-scrollbar-button — 捲軸上的按鈕(上下箭頭)

::-webkit-scrollbar-thumb — 捲軸上的滾動滑桿

#::-webkit-scrollbar -track — 捲軸軌道

::-webkit-scrollbar-track-piece — 捲軸沒有滑桿的軌道部分

::-webkit-scrollbar-corner — 當同時有垂直捲軸和水平捲軸時交會的部分

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

實現程式碼：

.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教學

以上是css怎麼設定滾動條寬度的詳細內容。更多資訊請關注PHP中文網其他相關文章！