純CSS樣式非常好用的捲軸樣式

我們平常在切片的過程中，某些DIV裡面如果想局部加滾動條的話都會非常醜陋。

無耐的時候我們通常都會使用Jquery外掛來實現。而且很多時候還面臨相容問題，總之沒有直接使用overflow:scroll使用者體驗好。

今天給大家推薦一個非常好用的純CSS的捲軸樣式，只需要將下面這段程式碼加入到你的CSS檔案中，就可以隨意的在不同的位置使用overflow:scroll了。

顯示的效果也非常不錯。

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: #ccc;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #c8c8c8;
}

並且也可以透過CSS直接定義顏色喲。

以上是純CSS樣式非常好用的捲軸樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！