problem when using javascript to get the actual viewport height
hey folks this is my css
and this is my javascript
to get the actual viewport height but when I do scrolling I get a janky behaviour
20 Replies
if I may ask, what is the use case for this?
I think its a bit strange to get the window height, devide it by 100 and then in css multiplying it again.
The jankyness could be due to the rounding (deviding/multiplying)
also in css do not put the var name in quotes
I'd do something like this
i mistakenly put the var name in quets here
and this multiplying and dividing i saw it on css tricks on that it was mentioned this to get actual viewport height
my main purpose is to do full page scrolling using the scroll snap
okay, don't see a purpose for it myself. but try my option, it should do the same
Did this css trick predate dvh maybe?
the css trick blog in which I saw this it there was no mention of dvh
what is the link
is this what you want to achieve? https://codepen.io/jochemm/pen/MWZdLPB
Louis Hoebregts
CSS-Tricks
The trick to viewport units on mobile | CSS-Tricks
Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own
now thinking of it, the code probably was for polyfilling the vh-unit, but indeed there are now more viewport units. (firefox still does not support them)
this is a polyfil library that tackles all: https://github.com/joppuyo/large-small-dynamic-viewport-units-polyfill
firefox supports the variants now according to caniuse https://caniuse.com/viewport-unit-variants
they're at 90ish%, so low enough that you'd want to consider your own analytics before using them extensively for non progressive enhancement purposes
ohw, i was reading a wrong caniuse page 😁 ooops
there is a medium article also which also talks about this issue and how to get the actual viewport height on mobile as well considering the viewport element here is the link
https://ilxanlar.medium.com/you-shouldnt-rely-on-css-100vh-and-here-s-why-1b4721e74487
Medium
You Shouldn’t Rely on CSS 100vh and Here’s Why!
Did you know that on mobile devices, 100vh is NOT actually 100vh?
so why aren't you using dvh?
this is a pretty decent fallback for browser versions that shouldnt be used
and some recent-ish versions of safari
the problem with dvh is when you go mobile and while scrolling when the viewport element will remove while scrolling there will be jankyness in the scrolling I already tried using that
do you have any listeners on the scroll event?
also, have you tried to enable smooth scrolling?
yes I do have smooth scroling on the html element
nope why ?
because that is a source of jankyness
from when full page scrolling using scroll snap needed event listener for scroll can you give a example ?
for what?