mulegoat Posted November 15, 2021 Share Posted November 15, 2021 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. 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 More sharing options...
GreenSock Posted November 15, 2021 Share Posted November 15, 2021 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 More sharing options...
mulegoat Posted November 15, 2021 Author Share Posted November 15, 2021 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 More sharing options...
Solution akapowl Posted November 15, 2021 Solution Share Posted November 15, 2021 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. 3 Link to comment Share on other sites More sharing options...
mulegoat Posted November 16, 2021 Author Share Posted November 16, 2021 That's twice in one week akapowl! Thank you so much - but i really should have caught that myself 😄. Need more coffee 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now