overflow-y：隐藏但应该启用鼠标滚动

Question

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

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

如有任何建议，我们将不胜感激。 :)

Answer 1

我假设你想在没有 JS 的情况下实现这个？

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

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;

}

Answer 2

试试这个：

在您的 css/scss 文件中添加可滚动且不带滚动条的主组件。在我的例子中是 "page_customers":

page_customers {

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

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

}

overflow-y：隐藏但应该启用鼠标滚动

overflow-y: hidden but should enable mouse scrolling

html

javascript

css

overflow

angular