隐藏浏览器滚动条解决方案今天下午看了看element-ui的官网，发现该网站的滚动条没有用浏览器默认的，而是自己写了一个

今天下午看了看element-ui的官网，发现该网站的滚动条没有用浏览器默认的，而是自己写了一个,从而是自己的网站看起来不“那么”丑,之前做网站也去过浏览器默认的滚动条，但不是该网站这种方式,所以就大概看了看,最后发现这种的处理应该是兼容性最好的,下面就说说这种方式实现的原理，知道原理后，肯定会立马理解的。

思考

想一下滚动条出现的时机，不畏就是子元素的高(宽)比父元素固定的高(宽)大了，从而出现了垂直(水平)方向的滚动条，还有一点，要明白，就是出现的滚动条是依附在父元素右边或者下边的(举个例子，子元素和父元素一样的宽，前提是父元素高度固定，但是子元素高度比父元素的大，在滚动的时候，滚动条只会在父元素的高度上来回滚动)，这个点很关键，正因为这个点，解决隐藏滚动条的方法就一下来了.

解决方法

根据上面的分析,就可以得到隐藏滚动条的方法，以垂直滚动条为例，解决方法如下：

我们在出现滚动条的元素外面再包一层div
然后确保该元素的宽比包含滚动条的元素小,或者说包含滚动条的元素宽要大于手动添加的div的宽大
再外层添加的div上使用 overflow:hidden，这个时候滚动条就消失了。
再给原来有滚动条的元素加上overflow: scroll;确保可以滚动

通过以上的步骤就可以实现在有滚动条的地方去隐藏掉了，其中第2个步骤,可以通过给包含滚动条的元素设置margin-righ等于一个负值,保证宽大于添加的外层div的宽，或者是在定义元素的宽上就定义一个小于外面div的宽。补充

要是想隐藏水平滚动条，只要将包含滚动条的高设置为大于外部添加的div的高。

有图有真相

有滚动条的布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      html,
      .wrap {
        height: 100%;
      }
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      .child {
        width: 100%;
        height: 600px;
        background-color: yellow;
      }
      .child:last-child {
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <!-- 这里是布局 -->
    <div class="wrap">
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </body>
</html>

看上图的红色框内默认有滚动条

去掉滚动条的布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      html,
      .wrap {
        height: 100%;
      }
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        /* 裁剪超出的滚动条 */
        overflow: hidden;
      }
      .wrap {
          /* 确保可以滑动 */
        overflow: scroll;
        /* 使wrap的宽度大于body的宽 */
        margin-right: -15px;
      }
      .child {
        width: 100%;
        height: 600px;
        background-color: yellow;
      }
      .child:last-child {
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <!-- 这里是内容布局 -->
    <div class="wrap">
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </body>
</html>

在上面的代码中,并没有添加单独最外面的div,因为这个div我们使用body元素来代替了,具体的代码可以参考body的style.

补充

上面的隐藏滚动条的例子是隐藏的垂直滚动条的例子，要是想隐藏水平方向的滚动条,原理是一致的。