百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> css怎么设定滚动条宽度
分享文章到:

css怎么设定滚动条宽度

发布时间:12/01 来源:未知 浏览: 关键词:

css设定滚动条宽度的办法:第一使用【::-webkit-scrollbar】伪类选中器设定滚动条样式;然后在该伪类选中器中通过width属性设定滚动条宽度即可。

环境:

本文适用于所有品牌的电脑。

(学习视频分享:css视频教程)

办法思绪如下:

在CSS中使用::-webkit-scrollbar伪类选中器来设定滚动条样式,并在此伪类选中器中通过width属性设定滚动条的宽度。

::-webkit-scrollbar CSS伪类选中器影响了一个元素的滚动条的样式。

你可以使用以下伪元素选中器去修改各式webkit阅读器的滚动条样式:

::-webkit-scrollbar — 整个滚动条

::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)

::-webkit-scrollbar-thumb — 滚动条上的滚动滑块

::-webkit-scrollbar-track — 滚动条轨道

::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分

::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分

::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)

实现代码:

.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;  
  height: 2em;
  }
  .invisible-scrollbar::-webkit-scrollbar {
  display: none;
  }
  /* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
 .mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;  
  height: 8px;  
  background-color: #aaa; 
  /* or add it to the track */}/* Add a thumb */
  .mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000; 
    }

相关引荐:CSS教程

以上就是css如何设定滚动条宽度的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有157人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板