在保持滚动功能的前提下隐藏滚动条的方法
使用三个容器包围起来,不需要计算滚动条的宽度
最外层容器设置宽高并隐藏超出内容,第二层容器设置滚动条,通过最外层的边框遮盖第二层的滚动条
这样就将内容限制在盒子里面了。这样子就看不到滚动条同时也可以滚动。
代码如下:
//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; }