溢出-y：隐藏但应该启用鼠标滚动答案

【问题标题】：overflow-y: hidden but should enable mouse scrolling溢出-y：隐藏但应该启用鼠标滚动
【发布时间】：2018-04-17 04:28:40
【问题描述】：

我在我的 CSS 中使用了overflow-y: hidden; 来禁用垂直滚动条。但我仍然需要允许用户通过鼠标滚轮上下滚动。

如何只允许鼠标滚轮垂直滚动，但使用 overflow-y: hidden; 删除显示滚动条？

感谢任何建议。 :)

【问题讨论】：

标签： javascript html css angular overflow

【解决方案1】：

我假设您想在没有 JS 的情况下实现这一目标？

如果是这种情况，一种方法是通过将滚动条偏移到父/包装元素之外来隐藏滚动条。比如：

HTML：

<div class="wrapper">
    <div class="child">
        <p>Your content</p>
    </div>
</div>

CSS：

.wrapper{
    height:200px;
    width: 100px;
    overflow: hidden;
}

.child{
    width: 100%;
    box-sizing: content-box;
    padding-right: 25px; //This amount will differ depending on browser. It represents the width of the scrollbar
    overflow-y: scroll;

}

【讨论】：

【解决方案2】：

试试这个：

在您的 css/scss 文件中添加可滚动且没有滚动条的主组件。就我而言，它是 "page_customers"：

page_customers {

    ::-webkit-scrollbar,
    *::-webkit-scrollbar {
        display: none;
    }

    /*... some css/scss ...*/

}

【讨论】：