Search code examples
javascripthtmlcssangularoverflow

overflow-y: hidden but should enable mouse scrolling

I have used overflow-y: hidden; in my css to disable vertical scroll-bars. But still I need to allow users to scroll up and down through the mouse wheel.

How do I allow ONLY mouse wheel vertical scrolling but remove showing scroll-bars using overflow-y: hidden; ?

Any suggestions are appreciated. :)

Solution

  • I assume you're wanting to achieve this without JS?

    If that's the case, one approach is to hide the scrollbar by offsetting it outside of a parent/wrapper element. So for example:

    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;

}