自定义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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/366291.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！