css怎么设置滚动条-css如何设置滚动条样式
在我们HTML页面中经常会用到滚动条来优化我们的HTML页面,那么我们该如何设置滚动条呢?下面我们来看一下使用css设置滚动条的方法

一、我们可以使用overflow属性设置是否出现滚动条

  • ::-webkit-scrollbar 滚动条整体部分

  • ::-webkit-scrollbar-button 滚动条两端的按钮

  • ::-webkit-scrollbar-track 外层轨道

  • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)

  • ::-webkit-scrollbar-thumb 滚动条里面可以拖动的那个

  • ::-webkit-scrollbar-corner 边角

  • ::-webkit-resizer 定义右下角拖动块的样式

  • 示例:

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width:16px; height:16px; background-color:#F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3); border-radius:10px; background-color:#F5F5F5; } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { border-radius:10px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3); background-color:#555; }

    以上就是css怎么设置滚动条?的详细内容,更多请关注AdminJS其它相关文章!

    声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

    本文地址:css怎么设置滚动条-css如何设置滚动条样式