Stacie Posted June 9, 2021 Share Posted June 9, 2021 Hi guys, I'm trying to implement Locomotive smooth scroll and GSAP library to my website. The main thing that I'm struggling with is that sometimes when you reload the page it can randomly (not every time) cut the website at any section. I made images load fast (rather than lazy loads), and also set to each section a custom attribute with data-scroll-section="1" to helps it understand that the code should work on each section. It helps but still this issue appears. Don't know what to do else and would much appreciate the help! Here is the CSS and Javascript that I use in my project: See the Pen PopBXrm by stacies (@stacies) on CodePen Link to comment Share on other sites More sharing options...
Али К Posted June 9, 2021 Share Posted June 9, 2021 Hello @Stacie , I think you should use .scrollerProxy() also you can check this topic : 2 Link to comment Share on other sites More sharing options...
Stacie Posted June 9, 2021 Author Share Posted June 9, 2021 Hi, @Ali Manuel! Thanks for such a quick reposnse. Would you mind share a little bit more? Checked this topic but didn't find something that might help in my situation Link to comment Share on other sites More sharing options...
akapowl Posted June 9, 2021 Share Posted June 9, 2021 Hey there, Stacie. After I cleaned up your provided codepen example, added some content for it to be scrollable and what I suppose is what you want to do with what I suppose should be the navbar, I can not see any of the content being cut off at all. See the Pen eca0ae08daa38d69937e0f16a0b52f6d by akapowl (@akapowl) on CodePen Would you mind adding a demo that shows your issue? It's hard to tell you anything on that when we can not see what is actually happening in your setup. 5 Link to comment Share on other sites More sharing options...
awazigh Posted August 16, 2021 Share Posted August 16, 2021 (edited) Hello @akapowl Thanks for the pen above, any idea why the scroll event is not detected when the cursor is on the navbar "area" (setting the navbar height to 100px makes it easy to see). Setting a lower z-index solves it in some way but navbar is not anymore on top of the main container. Thanks for your help. Edited August 16, 2021 by awazigh additional details Link to comment Share on other sites More sharing options...
akapowl Posted August 16, 2021 Share Posted August 16, 2021 It's nothing related to ScrollTrigger at least - probably more to the way locomotive-scroll handles the scrolling. I know that the same is the case with smooth-scrollbar, but they do have an option to avoid that behaviour. Off the top of my head, the only way I would know how to go around that behaviour, would be to set pointer-events to none for the navbar and specifically set pointer-events to auto for every single element that you need to be accessible. But that definitely feels more like a work-around to me. Maybe try asking on locomotive-scroll's GitHub for a definitive answer - maybe they do have a similar option? 3 Link to comment Share on other sites More sharing options...
awazigh Posted August 16, 2021 Share Posted August 16, 2021 Thanks for the prompt reply, I'll check locomotive's GH comments maybe other users experienced this as well. Link to comment Share on other sites More sharing options...
Mlbb lan Posted November 9, 2021 Share Posted November 9, 2021 On 6/9/2021 at 3:42 PM, Stacie said: Hi guys, I'm trying to implement Locomotive smooth scroll and GSAP library to my website. The main thing that I'm struggling with is that sometimes when you reload the page it can randomly (not every time) cut the website at any section. I made images load fast (rather than lazy loads), and also set to each section a custom attribute with data-scroll-section="1" to helps it understand that the code should work on each section. It helps but still this issue appears. Don't know what to do else and would much appreciate the help! Here is the CSS and Javascript that I use in my project: Yes, I have the same problem Also, in the browser Chrome I have a site is cut off (it is impossible to scroll the entire site), but if I refresh the page, then I can scroll further, here is a clear example of the problem, can you tell me what the problem is?https://share.vidyard.com/watch/fp8b4gDvBVYqGfHuwaW8iL? strange, but in Safari the whole site scrolls to the end without refreshing the page, but as soon as you go to the site Link to comment Share on other sites More sharing options...
Mlbb lan Posted November 9, 2021 Share Posted November 9, 2021 32 minutes ago, GeS said: Yes, I have the same problem Also, in the browser Chrome I have a site is cut off (it is impossible to scroll the entire site), but if I refresh the page, then I can scroll further, here is a clear example of the problem, can you tell me what the problem is?https://share.vidyard.com/watch/fp8b4gDvBVYqGfHuwaW8iL? strange, but in Safari the whole site scrolls to the end without refreshing the page, but as soon as you go to the site I found the answer to my question, if you are interested read it The problem is due to pictures that didn't show up in timehttps://github.com/locomotivemtl/locomotive-scroll/issues/220 I loaded the imagesLoaded.js library and then put one line of code and almost everything works perfectly (it doesn't load literally 30 pixels of the image, but it no longer crops the site as much as it used to) <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script> imagesLoaded('.root', { background: true }, function () {locoScroll.update();}); ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.refresh(); Link to comment Share on other sites More sharing options...
Cassie Posted November 9, 2021 Share Posted November 9, 2021 Thanks for dropping back in with the reason @GeS, much appreciated. 💚 Good luck with your project! 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