當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

自定义scoll样式

發布時間：2023/12/2 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了自定义scoll样式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

使用偽類自定義scroll樣式

效果：

代碼：

<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no"><title></title><style type="text/css">.inner {width: 265px;height: 400px;position: absolute;top: 33px;left: 50%;transform: translateX(-50%);overflow: hidden;border: 1px solid #ddd;padding-left: 10px;}.innerbox {overflow-x: hidden;overflow-y: auto;color: #000;font-size: .7rem;font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, "黑體", Arial, Tahoma;height: 100%;}/*定義滾動條高寬及背景高寬分別對應橫豎滾動條的尺寸*/ .innerbox::-webkit-scrollbar {width: 8px;height: 8px;background-color: #F5F5F5;}/*定義滾動條軌道內陰影圓角*/ .innerbox::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #9F88FF;}/*定義滑塊內陰影圓角*/ .innerbox::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);background-color: #CC00FF;}</style></head><body><div class="inner"><div class="innerbox"><p style="height:200px;">這是內容111</p><p style="height:400px;">這里是內容222</p><p>這里是內容333</p></div></div> </body></html>

更多專業前端知識，請上【猿2048】www.mk2048.com

總結

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

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