Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Fredrik Vestin

Hide browser scrollbar when using ScrollTrigger and Locomotive

Recommended Posts

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

Link to post
Share on other sites

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 jOrRRpV by akapowl (@akapowl) on CodePen

 

Welcome to the forums :) 

  • Like 2
Link to post
Share on other sites
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?

 

Link to post
Share on other sites

 

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.

 

  • Like 3
  • Thanks 1
Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×