【前端大概一分钟】css隐藏滚动条同时可以滚动

1. 通过 ::-webkit-scrollbar 伪元素

.inner-container::-webkit-scrollbar {
    display: none;
}
复制代码

简单粗暴，但是兼容性不好

2. 外层元素 overflow: hidden 内层元素absolute定位

// css 样式
<style>
    .element, .outer-container {
        width: 200px;
        height: 200px;
    }
    .outer-container {
        position: relative;
        overflow: hidden;
    }
    .inner-container {
        position: absolute;
        overflow-x: hidden;
        overflow-y: scroll;
    }
</style>
// html 结构
<div class="outer-container">
    <div class="inner-container">
        <div class="element">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            ...
        </div>
    </div>
</div>
复制代码

兼容性较好，绝对布局不用计算滚动条宽度

3. 父元素overflow: hidden, 子元素宽度 100% + 滚动条宽度

// css 样式
<style>
    .parent {
        width: 200px;
        overflow: hidden;
    }

    .child {
        height: 200px;
        width: calc(100% + 17px);
        overflow: auto;
    }
</style>
// html 结构
<div class="parent">
    <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    ...
</div>
复制代码

兼容性好，但是需要计算滚动条的宽度

参考
CSS 实现隐藏滚动条同时又可以滚动
CSS 隐藏滚动条，兼容ie和chrome