Share Posted February 3 Ok, this is a (kind of) follow-up to the last topic that @GreenSock saved my life with. Background: As with this kind of page, the annoying behavior of most mobile browsers to hide the address bar when the body scrolls and thereby triggering (unpredictable) resize events. Which I in turn have to ignore, but that leaves me with ugly leftover space. I can fill this for the price of recalculating everything, but then I have to watch out for when the address bar returns… I could work with that, but as the behavior is inconsistent on devices, it seems not worth the effort. (Side quest: does anyone know about a way to detect if the address bar overlays the top or the bottom part of a page?) To avoid body scroll at all, I try to pack my page into a container “window”—and I get unexpected results. Core Topic As you can see in the two CodePens when I do my stuff with the body as scroll target The pin spacer wraps around the container and the container stays in the pin-spacer while scrolling. Therefore, scrolling stops at the expected moment. As you can see in the second pen, if I do (at least in my simple mind) the exact same thing one level down, something different happens: The pin-spacer still wraps around the container but now when I scroll the pin-spacer is scrolled like before, but also the container is translated out of the pin-spacer by the same amount. Thereby doubling scroll speed (with which I could live) but also effectively doubling the height of the window's content, allowing to scroll the wannabe pined content out of the window. I guess I'm simply missing something obvious and will be pointed in the right direction easily. I did reduce my code from last time a lot, but I do know that it still might be deemed a bit more complex than absolutely necessary—I apologize if that's the case. And in case the issue is against my expectations hard to understand and exotic to love, I will try to boil it down some more. The top one is the try with the window, the bottom one is the original version in the body See the Pen zYLeYev by iDad5 (@iDad5) on CodePen See the Pen KKBJKrE by iDad5 (@iDad5) on CodePen Link to comment Share on other sites More sharing options...
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
Already have an account? Sign in here.Sign In Now