1. 效果如圖所示：

? ??

2. html示例代碼：

? ??

<div class="con"><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p></div>

3. css示例代碼：

??

.con{height:70px;overflow-y:auto; }.con::-webkit-scrollbar {/*滾動條整體樣式*/width: 5px; /*高寬分別對應橫豎滾動條的尺寸*/height: 1px; } .con::-webkit-scrollbar-thumb {/*滾動條里面小方塊*/border-radius: 10px;background-color: #F90;background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); } .con::-webkit-scrollbar-track {/*滾動條里面軌道*/-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);/*border-radius: 10px;*/background: #EDEDED; }

總結

以上是生活随笔為你收集整理的div 滚动条样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。