提起div 滾動條大家在熟悉不過了，被越來越多的人所熟知，那你知道div 滾動條嗎？快和小編一起去了解一下吧！

div 滾動條這個很多人還不知道,小飛來為大家解答以上的問題。現在讓我們一起來看看吧！

(相關資料圖)

1、（height和width根據需求設定）　　注意:如果只寫height就只有垂直滾動條，只寫width就只有水平滾動條,都不寫沒有效果。

2、還有這里overflow設置為auto,也就說是如果你的頁面高度大于300px就會出現滾動條，小于300px就沒有滾動條。

3、同理，如果寬度大于100px出現滾動條，小于就沒有。

4、2、你也可以將overflow設置為scroll，即:。

5、這樣設定的效果為不管你的頁面高度大于還是小于300px,都會出現滾動條，寬度同理。

6、3、也可以這樣設置水平滾動條：垂直滾動條：水平加垂直：擴展資料 可定義文檔中的分區或節（division/section）。

7、 標簽可以把文檔分割為獨立的、不同的部分。

8、它可以用作嚴格的組織工具，并且不使用任何格式與其關聯。

9、如果用 id 或 class 來標記 ，那么該標簽的作用會變得更加有效。

10、注釋： 是一個塊級元素，也就是說，瀏覽器通常會在 div 元素前后放置一個換行符。

11、提示：請使用 元素來組合塊級元素，這樣就可以使用樣式對它們進行格式化。

12、參考資料：百度百科 divdiv加滾動條的操作步驟如下：1.新建html文檔，如下圖紅框所示為一個空白新建的文檔；2.書寫hmtl代碼：在這里面鍵入你想要鍵入的內容即可，如下圖紅框所示；3.書寫外層軌道css代碼，這里主要是設置外層軌道的形狀和顏色，根據想要設置的樣式進行調節即可，示例代碼如下：body::-webkit-scrollbar { width:20px; height:2px; background:#ccc; border-radius:10px;}4.書寫內層軌道css代碼，這里主要是設置內層軌道的形狀和顏色，根據想要設置的樣式進行調節即可，示例代碼如下：body::-webkit-scrollbar-thumb{ display:block; width:6px; margin:0 auto; border-radius: 10px; background:red;}；5.在瀏覽器中預覽效果如下，滾動條的樣式是可以通過上方代碼調整的，根據個人需求調整即可。

13、要想使用滾動條，必須規定高度overflow-x:scroll;overflow-y:scroll自己好好看下別的地方有沒設置！~ 反正我的 div都是這么加 難道你的特殊？要想使用滾動條，必須規定高度

今天的內容分享完畢，希望對大家有所幫助。

關鍵詞：

責任編輯：Rex_07