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

Question

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

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

任何建议表示赞赏。 :)

Answer 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;

}

Answer 2

试试这个：

在你的css / scss文件中添加可滚动且没有滚动条的main-component。就我而言，它是“页面客户”：

page_customers {

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

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

}