problem when using javascript to get the actual viewport height

hey folks this is my css
main>div {
height: 100vh;
height: calc(var('--vh', 1vh) * 100);
}
main>div {
height: 100vh;
height: calc(var('--vh', 1vh) * 100);
}
and this is my javascript
window.addEventListener('resize', () => {
const vh = window.innerHeight * 0.01;

document.documentElement.style.setProperty('--vh', `${vh}px`);
})
window.addEventListener('resize', () => {
const vh = window.innerHeight * 0.01;

document.documentElement.style.setProperty('--vh', `${vh}px`);
})
to get the actual viewport height but when I do scrolling I get a janky behaviour
20 Replies
MarkBoots
MarkBoots13mo ago
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
window.addEventListener('resize', () => {
document.documentElement.style.setProperty('--window-height', window.innerHeight + 'px')
}
window.addEventListener('resize', () => {
document.documentElement.style.setProperty('--window-height', window.innerHeight + 'px')
}
main > div {
height: var(--window-height, 100vh) /* get the custom property, or use default 100vh
}
main > div {
height: var(--window-height, 100vh) /* get the custom property, or use default 100vh
}
Aditya Kirad
Aditya KiradOP13mo ago
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
MarkBoots
MarkBoots13mo ago
okay, don't see a purpose for it myself. but try my option, it should do the same
Jochem
Jochem13mo ago
Did this css trick predate dvh maybe?
Aditya Kirad
Aditya KiradOP13mo ago
the css trick blog in which I saw this it there was no mention of dvh
MarkBoots
MarkBoots13mo ago
what is the link
Jochem
Jochem13mo ago
is this what you want to achieve? https://codepen.io/jochemm/pen/MWZdLPB
MarkBoots
MarkBoots13mo ago
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
Jochem
Jochem13mo ago
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
MarkBoots
MarkBoots13mo ago
ohw, i was reading a wrong caniuse page 😁 ooops
Aditya Kirad
Aditya KiradOP13mo ago
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?
Jochem
Jochem13mo ago
so why aren't you using dvh?
ἔρως
ἔρως13mo ago
this is a pretty decent fallback for browser versions that shouldnt be used and some recent-ish versions of safari
Aditya Kirad
Aditya KiradOP13mo ago
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
ἔρως
ἔρως13mo ago
do you have any listeners on the scroll event? also, have you tried to enable smooth scrolling?
Aditya Kirad
Aditya KiradOP13mo ago
yes I do have smooth scroling on the html element nope why ?
ἔρως
ἔρως13mo ago
because that is a source of jankyness
Aditya Kirad
Aditya KiradOP13mo ago
from when full page scrolling using scroll snap needed event listener for scroll can you give a example ?
ἔρως
ἔρως13mo ago
for what?
Want results from more Discord servers?
Add your server