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

Posted 2022-11-11 miaslady

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;

    .insideBox

      width: 400px;

      height: 400px;

      background: radial-gradient(red, green, blue); /* 标准的语法 */