css自定义滚动条样式
分类专栏: Css&
简介 适合在谷歌或基于谷歌内核的浏览器环境下运行
<h5><span class="ql-size-large">滚动条的样式主要有三部分组成:</span></h5><pre class="ql-syntax" spellcheck="false">1、::-webkit-scrollbar 滚动条整体样式;
2、::-webkit-scrollbar-thumb 滑块部分;
3、::-webkit-scrollbar-thumb 轨道部分;
</pre><p><br></p><p><span class="ql-size-large">HTML代码</span></p><pre class="ql-syntax" spellcheck="false"><div class="box">
<div class="scrollbar"></div>
</div>
</pre><p><br></p><p><span class="ql-size-large">CSS代码</span></p><p><br></p><pre class="ql-syntax" spellcheck="false"> .box{
width: 150px;
height: 200px;
overflow: scroll;
margin: 100px;
}
.scrollbar{
width: 30px;
height: 300px;
margin: 0 auto;
}
/*滚动条整体样式*/
.box::-webkit-scrollbar {
width: 10px;
height: 1px;
}
/*滚动条滑块*/
.box::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
/*滚动条轨道*/
.box::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
border-radius: 10px;
background: #ccc;
}
</pre><p><br></p>
分享到:
转载:
喜欢 0
收藏
上一篇:
使用css自定义input单选框样式
暂无评论信息
- 相关文章
- 文章推荐
-
娱美德旗下MMORPG手游《传奇4》将推出新PVP玩法"比奇掠夺"&
《传奇4》推出新门派PVP玩法!韩国首尔2022年6月29日 /美通社/ -- 《传奇4》(MIR4)的新PVP玩法比奇掠夺(Bicheon Heist)于2022年6月28日推出。
-
Node 配置sequelize + mysql,根据模型自动创建数据库表
研究了一下午的node + sequelize + mysql。
-
淘宝 NPM 镜像站喊你切换新域名啦
淘宝 NPM 镜像站(npm.taobao.org)自 2014 年 正式对外服务,一开始只是想简单地做 NPM 的中国镜像站点,回馈国内前端社区,不知不觉竟然一直运行到现在。当年参考 Ruby Gems 淘宝镜像 的方式,跟阿里开源组织申请了 taobao.org 的二级域名,镜像站点名称也自然而然地取名为 淘宝 NPM 镜像站 (下称 CNPM)。
-
jQuery 3.0正式发布
jQuery 基金会刚刚发布了该 Java 框架的 3.0 版本,并且首次抛弃了对老旧的 IE 浏览器的支持。jQuery 3.0 的工作始于 2014 年 10 月,其最初目标是在 2.0 版本之上进行完善,并和遥远的 1.0 版代码说再见——因为要兼容 IE 的缘故,其已经臃肿不堪。jQuery 2.0 已经与 1.0 版本完全不兼容,而 3.0 也将继续这一路线。
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:207篇
- 建站时间:已运行917天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据