css隐藏滚动条(webkit和非webkit)

久未见 提交于 2019-11-30 03:14:44

1.移动端或者谷歌浏览器(webkit内核)

::-webkit-scrollbar {
  display: none;
}
2.兼容所有浏览器的css写法
demo:
html部分:
<div class="outsideBox">
      <div class="centerBox">
        <div class="insideBox"></div>
      </div>
    </div>
CSS部分:
.outsideBox{
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: relative;
  margin-left:-20px;
  margin-top:-20px;
  .centerBox{
    position: absolute;
    left:20px;
    top:20px;
    width: 200px;
    height: 200px;
    overflow: scroll;
    margin-right: -15px; margin-bottom: -15px; 
    .insideBox{
      width: 400px;
      height: 400px;
      background: radial-gradient(red, green, blue); /* 标准的语法 */
    }  
  }
}
 
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!