用css美化默認的滾動條樣式，用這個屬性就夠了

很多朋友，會覺得默認的css滾動條樣式是很醜的吧，稍微改下-webkit-scrollbar（滾動條整體樣式）、-webkit-scrollbar-thumb（滾動條裡面小方塊樣式）、-webkit-scrollbar-track（滾動條裡面軌道樣式）就ok了，要改什麼樣的就改什麼樣的css滾動條。

改默認css滾動條樣式，例子代碼如下：

<title>css滾動條樣式/<title>

<style>

.box{

width: 600px;

height: 400px;

margin: 100px auto;

border: 1px solid #000;

border-right: 0;

}

.main{

overflow-x: hidden;

overflow-y: auto;

color: #000;

font-size: 16px;

height: 100%;

}

.main p{height:300px;}

/*-------滾動條整體樣式----*/

.main::-webkit-scrollbar {

width:8px;

height:8px;

}

/*滾動條裡面小方塊樣式*/

.main::-webkit-scrollbar-thumb {

border-radius:100px;

-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);

background:red;

}

/*滾動條裡面軌道樣式*/

.main::-webkit-scrollbar-track {

-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);

border-radius:0;

background:rgba(0,0,0,0.1);

}

效果圖：

特別注意：

實現單個div裡面的內容滾動，必需滿足以下3個條件：

1、div必須設定固定的高度，不能使用百分比或 auto 等彈性值；

2、其中的內容高度必須超過它本身的高度；

3、必需要添加這個overflow:auto屬性。

附：

overflow的屬性和不同值得作用

1.overflow:visible;不剪切內容也不添加滾動條。默認值。使用該值時，無論設置的"width"和"height"的值是多少，其中的內容無論是否超出範圍都將被強制顯示;

2.overflow:auto;在需要時剪切內容並添加滾動條;

3.overflow:hidden;不顯示超過對象高度的內容;

4.overflow:scroll;總是顯示縱向滾動條;

5.overflow 水平及垂直方向內容溢出時的設置;

6.overflow-x 水平方向內容溢出時的設置;

7.overflow-y 垂直方向內容溢出時的設置。

原文地址：http://tangjiusheng.com/divcss/159.html

閱讀更多 湯久生前端 的文章

關鍵字: HTML 滾動條 就夠