css隐藏滚动条（webkit和非webkit）

时间:2019-09-19
本文章向大家介绍css隐藏滚动条（webkit和非webkit），主要包括css隐藏滚动条（webkit和非webkit）使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

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); /* 标准的语法 */
    }  
  }
}
 

原文地址：https://www.cnblogs.com/miaSlady/p/11549868.html

随机文章
WEB前端知识点必读
最近更新