在保持滚动功能的前提下隐藏滚动条的方法

使用三个容器包围起来,不需要计算滚动条的宽度

最外层容器设置宽高并隐藏超出内容,第二层容器设置滚动条,通过最外层的边框遮盖第二层的滚动条

这样就将内容限制在盒子里面了。这样子就看不到滚动条同时也可以滚动。

代码如下:

//code from http://caibaojian.com/hide-scrollbar.html
 <div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>
.element, .outer-container {
  width: 200px;
  height: 200px;
}

.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}

.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

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

 

posted @ 2021-05-18 16:09  野望之风  阅读(245)  评论(0编辑  收藏  举报