CSS-界面滾動時不顯示滾動條

設置滾動條的樣式：

div::-webkit-scrollbar {
  width: 0;
}

 

 

關於::-webkit-scrollbar

::-webkit-scrollbar CSS偽類選擇器影響了一個元素的滾動條的樣式

::-webkit-scrollbar 僅僅在支持WebKit的瀏覽器 (例如, 谷歌Chrome, 蘋果Safari)可以使用.

 

CSS滾動條選擇器

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

• ::-webkit-scrollbar — 整個滾動條.
• ::-webkit-scrollbar-button — 滾動條上的按鈕 (上下箭頭).
• ::-webkit-scrollbar-thumb — 滾動條上的滾動滑塊.
• ::-webkit-scrollbar-track — 滾動條軌道.
• ::-webkit-scrollbar-track-piece — 滾動條沒有滑塊的軌道部分.
• ::-webkit-scrollbar-corner — 當同時有垂直滾動條和水平滾動條時交匯的部分.
• ::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕).

 

語法

::-webkit-scrollbar { styles here }

 

 

例子

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /* or add it to the track */
}

.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000; 
}