css 溢出滾動條顯示，修改滾動條樣式

文本或者內容溢出滾動條顯示：

a/橫縱都出滾動條：css添加屬性{overflow:auto;}

b/橫向滾動條：css添加屬性{overflow-x:auto;}

c/縱向滾動條：css添加屬性{overflow-y:auto;}

 

修改滾動條樣式：

 

<style>
  /*定義滾動條軌道 內陰影+圓角*/

.ximiBlock::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
  border-radius: 5px;
  background-color: rgba(255,255,255,0.8);
}

  /*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/

.ximiBlock::-webkit-scrollbar
{
  width: 5px;
  background-color: rgba(0,0,0,0);
}

  /*定義滑塊 內陰影+圓角*/

.ximiBlock::-webkit-scrollbar-thumb
{
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.3);
  background-color: #555;
}

</style>

　　

• ::-webkit-scrollbar 滾動條整體部分
• ::-webkit-scrollbar-thumb  滾動條里面的小方塊，能向上向下移動（或往左往右移動，取決於是垂直滾動條還是水平滾動條）
• ::-webkit-scrollbar-track  滾動條的軌道（里面裝有Thumb）
• ::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點擊微調小方塊的位置。
• ::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）
• ::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處
• ::-webkit-resizer 兩個滾動條的交匯處上用於通過拖動調整元素大小的小控件