实现无滚动条滑动效果

原文地址：http://www.linzichen.cn/article/1569749875082395648

在网页中，有些宽高固定的区域，如果它们的内容高度或宽度超出了自身的宽高，会导致浏览器自身滚动条的出现。而不同内核的浏览器对滚动条的处理方式也不同，且局域块中出现滚动条不是特别美观，基于这种情况，我们常常选择隐藏滚动条且支持滑动的效果。如下图：

比如我们要实现这种上下滑动且隐藏滚动条的效果，大致思路如下：

1. 准备两个盒子，外盒子outer-box和内盒子inner-box。

2. 给ourter-box一个固定宽度，也就是原型图的宽度。比如200px 。
3. 让inner-box支持上下滚动且出现滚动条。
4. 设置 inner-box的 宽度比outer-box的宽度多一个滚动条的距离，如果不确定滚动条有多宽，这个距离可以给大一点，比如 50px。
5. 只需要让outer-box超出的部分隐藏，这样就可以把 inner-box多出来的宽（也就是滚动条）隐藏掉。

具体代码如下：

html部分：

  <div class="outer-box">
    <ul class="inner-box">
      <li>目录一</li>
      <li>目录二</li>
      <li>目录三</li>
      <li>目录四</li>
      <li>目录五</li>
      <li>目录六</li>
      <li>目录七</li>
      <li>目录八</li>
    </ul>
  </div>

css部分：

* {
      margin: 0;
      padding: 0;
      list-style: none;
      box-sizing: border-box;
    }
    .outer-box {
      width: 200px;
      height: 300px;
      margin: 20px auto;
      background-color: #cccccc;
      /* 隐藏inner-box多出来的宽，也就是我们认为的滚动条的宽度 */
      overflow: hidden;
    }
    .inner-box {
      height: 100%;
      overflow-y: auto;
      /* 不确定滚动条的宽度，所以这里给50px 足够了 */
      width: calc(100% + 50px);
    }
    li {
      padding: 20px;
      width: 200px;
    }
    ul li:nth-child(2n) {
      background-color: #aaaaaa;
    }