现在的位置: 首页 > web前端 > 正文

CSS设置滚动条样式怎么做

2020年07月09日 web前端 ⁄ 共 1008字 ⁄ 字号 评论关闭

  因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决。比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的。


  CSS设置滚动条代码如下:


  <divclass="inner">


  <divclass="innerbox">


  <pstyle="height:200px;">这是内容111</p>


  <pstyle="height:400px;">这里是内容222</p>


  <p>这里是内容333</p>


  </div>


  </div>


  .inner{


  width:265px;


  height:400px;


  position:absolute;


  top:33px;


  left:13px;/*cursor:pointer;*/


  overflow:hidden;


  }


  .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:4px;/*高宽分别对应横竖滚动条的尺寸*/


  height:4px;


  }


  .innerbox::-webkit-scrollbar-thumb{/*滚动条里面小方块*/


  border-radius:5px;


  webkit下面的CSS设置滚动条


  主要有下面7个属性


  ::-webkit-scrollbar滚动条整体部分,可以设置宽度啥的


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


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


  ::-webkit-scrollbar-track-piece内层滚动槽


  ::-webkit-scrollbar-thumb滚动的滑块


  ::-webkit-scrollbar-corner边角


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


  总之,CSS设置滚动条给大家简单的介绍了一些,希望大家多看看。

抱歉!评论已关闭.