Hide browser scrollbar when using ScrollTrigger and Locomotive

[Fredrik Vestin]

I am using ScrollTrigger together with Locomotive for smooth scrolling. I liked the look of the Locomotive scrollbar when using just Locomotive but now, for some reason, ScrollTrigger adds an overflow-y: scroll to the scroll container making a standard browser scroll-bar show at all times and underneath the Locomotive scroll-bar when it is visible. I saw that it's the same in the codepen example shown on the ScrollTrigger.scrollerProxy() documentation page.

Is there any way to get rid of the browser scrollbar in a good way when using ScrollTrigger and Locomotive? I tried setting overflow: hidden !important; on the element in my css but that results in the scrollbar showing very briefly before disappearing (like a flicker).

See the Pen 1dc38ca14811bc76e25c4b8c686b653d by GreenSock (@GreenSock) on CodePen

[akapowl]

Hey @Fredrik Vestin

 

You could set overflow-y: hidden !important; to your scroller-element and you should be good to go without that browser-scrollbar in sight.

 

See the Pen b38c1c388b8f6ba0db6311134234f972 by akapowl (@akapowl) on CodePen

 

Welcome to the forums  

[akapowl]

4 hours ago, Fredrik Vestin said:

Is there any way to get rid of the browser scrollbar in a good way when using ScrollTrigger and Locomotive? I tried setting overflow: hidden !important; on the element in my css but that results in the scrollbar showing very briefly before disappearing (like a flicker).

 

Oops, totally missed that part 😅

 

But I myself actually can not make out any of your described flicker on the demo I posted, so maybe it is something related to your setup?

 

Could you post a minimal demo of what you have?

 

[akapowl]

 

Aaand now I think I know what you meant; that showing of the scrollbar for maybe one glimpse of an eye (only saw it when opening the pen fresh in debug mode). But it seems, that adding an additional overflow: hidden; to body and html resolves this.

 

I just updated the pen I posted above.

Try it out and let us know if this is better for you, too.

 

[Fredrik Vestin]

Thank you so much! I figured since locomotive sets html and body to overflow: hidden when you activate smooth scroll I wouldn't have to, but setting overflow: hidden in my own css helped. I guess it manages to paint with the scrollbar just before the classes get applied that sets hidden on html and body.