Workarounds for tip on viewport height

[NateWr]

Thanks for this. I'm experimenting now and learning the ins-and-outs of scrolling. The readme includes this tip:

Avoid using viewport height (vh) in your CSS because scrolling up and down constantly triggers vh to change, which will also trigger a window resize.

I presume you're referring to how mobile browsers show/hide the navbar in the app when the user scrolls "back up". Is that a correct assumption? Do you have any suggestions for workarounds? I use vh quite a bit and I'm struggling to imagine a good alternative that scales with the user's device.

For example, if I want a block to sit stickied in the middle of the screen while other stuff scrolls by, wouldn't I need to use 100vh on the parent container? Here's a simple example:

https://codepen.io/natewr/pen/WNaWvoL

[hacknug]

Not sure if the readme refers to what you mentioned but in case it does I think there's two approaches that could work:

• css: https://web.dev/articles/viewport-units
• css + js: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

[JPrisk]

you could use svh which is well supported now https://caniuse.com/viewport-unit-variants

the tailwindcss docs explain it really well https://tailwindcss.com/docs/height#small-viewport-height