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>

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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_3797