css隐藏滚动条

导语： 在前端开发中，我们经常会遇到这样的情况，为了让页面看起来更加美观，需要将滚动条进行隐藏。下面介绍几种常用的方法：

方法1、 使用三个容器将内容包裹起来，并通过css样式将滚动条隐藏

<div class="outer-container">
    <div class="inner-container">
       <div class="content">
           ......
       </div>
    </div>
</div>

.outer-container {
    height: 100%;
}

.inner-container {
  height: calc(100% - 40px);
  overflow-x: hidden;
  overflow-y: scroll;
}

.inner-container::-webkit-scrollbar {
  display: none;
}

注意

::-webkit-scrollbar 仅仅支持webkit的浏览器，如Chrome，Safari等

方法2、外层容器的宽度设置为窗口宽度 + 10px

.outer-container {
  width: calc(100vw + 10px);   // 隐藏滚动条
}
.inner-container {
  height: calc(100% - 40px);
  overflow-x: hidden;
  overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
  display: none;
}