Jump to content
GreenSock

mulegoat

Locomotive + ScrollTrigger Pin Element Issue

Go to solution Solved by akapowl,

Recommended Posts

Hi everyone,

 

I'm having an issue when trying to pin an element using scrolltrigger with locomotive scroll. When I try to pin an element the width of the scroll proxy seems to get changed (or a scrollbar adrea added, I can't figure out which). You can see an example here:

 

https://staging.taylorandmoor.com/our-collections/

 

I've also attached a screenshot. 913428129_Screenshot2021-11-15at18_14_02.thumb.png.51c3f4990572e25e0a76357389f2ab21.png

 

On all other pages the scroll container (.scroll-container) is 100vw.

 

I can't recreate the issue in my basic codepen either? I've set pinSpacing to false but is there anything else that could be causing this?

 

Many thanks in advance for any help 

See the Pen mdMjRjd by mulegoat (@mulegoat) on CodePen

Link to comment
Share on other sites

I don't really understand the question, sorry. And you said the CodePen minimal demo works fine, right? 

 

It's not feasible to troubleshoot a live site for free because there are so many other factors involved and we can't make changes and see results. Also please keep in mind that LocomotiveScroll is not a GreenSock product, so it's tough for us to support that. I glanced at the link you provided and I didn't notice anything odd but I'm sure I was just missing something obvious. Nice-looking site, by the way. 👍

 

If you still need some help, please provide a minimal demo the clearly shows the problem and we'd be happy to take a peek. 

Link to comment
Share on other sites

 Hi Jack,

 

Many thanks for your reply. Appreciate that it's hard to troubleshoot.

 

If you look at the screenshot of the site it seems to add a native scroll container to the page. It seems to only get added on the page with the pinned element. It's not that obvious but if you look at the page with the pinned element there's a border line and light grey background on the right of the page that isn't there on pages without the pinned element. If you look at the pen in full screen mode you'll see the difference where the width of the scroll container element doesn't fill the entire page. 

 

Hope that helps,

 

Thank you for the kind words about the site. As a greensock user since the flash days it means alot. You guys are amazing

Link to comment
Share on other sites

  • Solution

Hello @mulegoat

 

Try adding overflow: hidden !important to the smooth-scrolling container.

That resolves things in the codepen demo for me. Maybe it'll help on your site, too.

 

.scroll-container {
  overflow: hidden !important;
}

 

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

 

Edit: ...and if you set the same to the body, you can also prevent a short flash of the scrollbar showing on load.

  • Like 3
Link to comment
Share on other sites

That's twice in one week akapowl! Thank you so much - but i really should have caught that myself 😄. Need more coffee

  • Haha 1
Link to comment
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.
×