利用CSS3实现自定义滚动条代码分享

站长资源 2024/12/26 佚名

30 1538 30

DDR爱好者之家 Design By 杰米

先来看看效果图

话不多说，直接看实例代码

复制代码代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS3实现自定义滚动条代码</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
body{padding:0;margin:0;}
.box{ width:600px;height: auto;margin:0 auto; }
.scroll{ overflow:auto; width: 470px;height: 210px;padding-right: 25px; margin-top: 18px;}
.scroll p{font-family: "微软雅黑";font-size: 14px;color: #9F9F9F;line-height: 25px;margin-top: 20px;}
#scroll-1 {
overflow:auto;
}
#scroll-1::-webkit-scrollbar {
width:10px;
height:10px;
}
#scroll-1::-webkit-scrollbar-button {
background-color:#fff;
}
#scroll-1::-webkit-scrollbar-track {
background:#dfdfdf;
border-radius:5px;
}
#scroll-1::-webkit-scrollbar-track-piece {
}
#scroll-1::-webkit-scrollbar-thumb{
background:#F2C826;
border-radius:5px;
}
#scroll-1::-webkit-scrollbar-corner {
background:#82AFFF;
}
#scroll-1::-webkit-scrollbar-resizer {
background:#dfdfdf;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div class="box">
<div class="scroll" id="scroll-1">
<p>无避让立体车库是斥巨资打造，公司注册资本一个亿，平台用统一的标准多维度地展示立体车库行业企业，购买者可以通过这个平台就轻松了解国内外优秀立体车库企业的产品与服务。实现停车难城市的本地化服务</p>
<p>为行业研发定制化无避让立体车库产品。您不必成为专家，我们为您提供差异化服务为行业带来新的利润增长致力于用无避让立体车库改善生活，领跑国内立体</p>
<p>无避让立体车库是斥巨资打造，公司注册资本一个亿，平台用统一的标准多维度地展示立体车库行业企业，购买者可以通过这个平台就轻松了解国内外优秀立体车库企业的产品与服务。实现停车难城市的本地化服务</p>
<p>为行业研发定制化无避让立体车库产品。您不必成为专家，我们为您提供差异化服务为行业带来新的利润增长致力于用无避让立体车库改善生活，领跑国内立体</p>
</div>
</div>
<script type="text/javascript" src="/UploadFiles/2021-03-30/<a href="> <script type="text/javascript">

</script>
</body>
</html>

总结

以上就是利用CSS3实现自定义滚动条代码的全部内容，希望本文的内容对大家学习使用CSS3能有所帮助。

CSS3,自定义,滚动条

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“利用CSS3实现自定义滚动条代码分享”

暂无评论...

利用CSS3实现自定义滚动条代码分享

利用纯CSS实现动态的文字效果实例

纯CSS3实现图片无间断轮播效果

评论“利用CSS3实现自定义滚动条代码分享”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接