DrNix Posted February 11, 2021 Share Posted February 11, 2021 Hi! I try add custom scroller element to horizontal snapping. This works, but the content bounces slightly vertically when scrolling. This is especially noticeable when moving between sections, if you slowly turn the mouse wheel in different directions. See the Pen abBBdLq by drnixx (@drnixx) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 11, 2021 Share Posted February 11, 2021 Hey DrNix and welcome to the GreenSock forums. This issue occurs mainly on Mac and iOS with Chrome and Safari and is almost surely due to how those browsers handle scrolling in a different thread than the main JS thread. From what I can tell, GSAP is doing what it's supposed to do properly. I'm not aware of any workarounds right now. @GreenSock or anyone else, do you know of any ways to get these browsers to render things more smoothly? Link to comment Share on other sites More sharing options...
GreenSock Posted February 11, 2021 Share Posted February 11, 2021 All you need to do is add: pinType: "fixed" Like Zach said, the fundamental issue is that many modern browsers handle scrolling on an entirely different thread than everything else, so it's out of sync with repaints. Usually this only affects the root element (<body>/<html>) and anything that's nested should be handled with transforms, partially because if you set position: fixed on an element nested in something that has any transform applied, the browser treats it like it's relative to that ancestor element rather than the viewport. Does that clear things up? 2 Link to comment Share on other sites More sharing options...
DrNix Posted February 11, 2021 Author Share Posted February 11, 2021 1 hour ago, GreenSock said: All you need to do is add: pinType: "fixed" Does that clear things up? Probably there must be something else? If just add a pinType: fixed to the above example, then it breaks and scrolling does not work Link to comment Share on other sites More sharing options...
Solution GreenSock Posted February 11, 2021 Solution Share Posted February 11, 2021 You just need to set z-index to -1 or something to make it sit BEHIND your .scroller element: See the Pen 218907bfc7b72751311d5da3e6d40404 by GreenSock (@GreenSock) on CodePen When something gets position: fixed, it is taken out of the document flow and apparently some browsers make it sit on top of other things by default, so it was on top of the .scroller element, and you couldn't see or interact with its scrollbar/position. In short, it's a css/layout issue Does that help? 3 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