Hide window scrollbar with Overflow-y set to scroll

Question

I came across this site Teehan and Lax (http://www.teehanlax.com/) and saw that when you click on the top menu, a set of links dropsdown. The containing div is set to

#main-nav-drop{
    position:fixed;
    overflow-y:scroll;
}

However, when scrolling, the actual window scrollbar is hidden, both on desktop and mobile. How is this being done?

Yauhen Vasileusky · Accepted Answer · 2013-05-09 07:49:29Z

1

On that site it is done by adding padding-right: 100px; to nav element.

answered May 9, 2013 at 7:49

Yauhen Vasileusky

6856 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cusejuice Over a year ago

Interesting solution. Are there any other ways to do this? I'm working on an off-canvas slideout responsive menu and need the menu to be scrollable. I'm looking into Overflow.js, but would like to remove the scrollbar that appears so it seems more native-like.

Yauhen Vasileusky Over a year ago

You can set overflow:hidden, track mousewheel event, and change scrollTop property by scroll delta. github.com/brandonaaron/jquery-mousewheel might be helpful. Which solution is more likely i'm not sure.

Collectives™ on Stack Overflow

Hide window scrollbar with Overflow-y set to scroll

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related