CODEWITHSUNDEEP
javascripthtmlcssangularoverflow
stranger
stranger

Reputation: 65

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. :)

Upvotes: 1

Views: 4536

Answers (3)

Aace
Aace

Reputation: 1822

How about make overflow-y: auto, but hide the scrollbar?

.scroller
{
    overflow-y: auto;
    scrollbar-width: none;
}

Upvotes: 0

Dmitry Stepanov
Dmitry Stepanov

Reputation: 366

Try this:

In your css/scss file add to main-component that scrolable and without scrollbar. In my case it's "page_customers":

page_customers {

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

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

}

Upvotes: 1

Dacre Denny
Dacre Denny

Reputation: 30360

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;

}

Upvotes: 2

Related Questions