跟大家講解下有關滾動條如何設置，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說滾動條如何設置，小編也收集到了有關滾動條如何設置的相關資料，希望大家看到了會喜歡。

設置滾動條的方法：1、使用overflow屬性設置是否出現滾動條，代碼如“overflow:scroll”；2、使用scrollbar屬性設置滾動條樣式即可。

本文操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。

使用css設置滾動條的方法

一、我們可以使用overflow屬性設置是否出現滾動條

overflow:scroll 或者overflow-x:scroll 或者overflow-y:scroll

當塊級內容區域超出塊級元素范圍的時候，就會以滾動條的形式展示，你可以滾動里面的內容，里面的內容不會超出塊級區域范圍。

二、使用scrollbar屬性設置滾動條樣式

::-webkit-scrollbar 滾動條整體部分

::-webkit-scrollbar-button 滾動條兩端的按鈕

::-webkit-scrollbar-track 外層軌道

::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）

::-webkit-scrollbar-thumb 滾動條里面可以拖動的那個

::-webkit-scrollbar-corner 邊角

::-webkit-resizer 定義右下角拖動塊的樣式

示例：

::-webkit-scrollbar{ width:16px; height:16px; background-color:#F5F5F5;}::-webkit-scrollbar-track{ -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; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3); background-color:#555;}

效果圖：

【推薦學習：css視頻教程】

以上就是滾動條如何設置的詳細內容，更多請關注php中文網其它相關文章！

來源：php中文網