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•8mo 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•8mo 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•8mo ago

okay, don't see a purpose for it myself. but try my option, it should do the same

Jochem•8mo ago

Did this css trick predate dvh maybe?

Aditya Kirad•8mo ago

the css trick blog in which I saw this it there was no mention of dvh

MarkBoots•8mo ago

what is the link

Jochem•8mo ago

is this what you want to achieve? https://codepen.io/jochemm/pen/MWZdLPB

Aditya Kirad•8mo ago

https://css-tricks.com/the-trick-to-viewport-units-on-mobile/#:~:text=The%20trick%20is%20to%20store,instead%20of%20the%20vh%20unit.&text=OK%2C%20that%20sets%20us%20up,vh%20unit%20let%20vh%20%3D%20window.

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

MarkBoots•8mo 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•8mo 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•8mo ago

ohw, i was reading a wrong caniuse page 😁 ooops

Aditya Kirad•8mo 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•8mo ago

so why aren't you using dvh?

ἔρως•8mo ago

this is a pretty decent fallback for browser versions that shouldnt be used and some recent-ish versions of safari

Aditya Kirad•8mo 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

ἔρως•8mo ago

do you have any listeners on the scroll event? also, have you tried to enable smooth scrolling?

Aditya Kirad•8mo ago

yes I do have smooth scroling on the html element nope why ?

ἔρως•8mo ago

because that is a source of jankyness

Aditya Kirad•8mo ago

from when full page scrolling using scroll snap needed event listener for scroll can you give a example ?

ἔρως•8mo ago

for what?

Gaming

Programming

problem when using javascript to get the actual viewport height