你的位置:首页 > 软件开发 > 网页设计 > 自定义scoll样式

自定义scoll样式

发布时间:2018-10-23 11:01:50
使用伪类自定义scroll样式效果: 代码:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport& ...

使用伪类自定义scroll样式

效果:

自定义scoll样式

 

代码:

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no"> <title></title> <style type="text/css">  .inner {   width: 265px;   height: 400px;   position: absolute;   top: 33px;   left: 50%;   transform: translateX(-50%);   overflow: hidden;   border: 1px solid #ddd;   padding-left: 10px;  }    .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: 8px;   height: 8px;   background-color: #F5F5F5;  }  /*定义滚动条轨道 内阴影+圆角*/    .innerbox::-webkit-scrollbar-track {   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);   border-radius: 10px;   background-color: #9F88FF;  }  /*定义滑块 内阴影+圆角*/   .innerbox::-webkit-scrollbar-thumb {   border-radius: 10px;   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);   background-color: #CC00FF;  } </style></head><body> <div >  <div >   <p >这是内容111</p>   <p >这里是内容222</p>   <p>这里是内容333</p>  </div> </div></body></html>

  

原标题:自定义scoll样式

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录