DEV Community

Discussion on: Don't use 100vh for mobile responsive

Collapse
 
nosovandrew profile image
Andrew Nosov

Cool solution, it helped me, thank you! In addition I've improved this approach with some debounce mechanism (setTimeout) that will limit count of function executions.

let timeoutId = null;
const documentHeight = () => {
  clearTimeout(timeoutId); // avoid execution of previous timeouts
  timeoutId = setTimeout(() => {
   const doc = document.documentElement;
   doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
  }, 200);
};
window.addEventListener(resize, documentHeight);
documentHeight();
Enter fullscreen mode Exit fullscreen mode
Collapse
 
nirazanbasnet profile image
⚡ Nirazan Basnet ⚡

Tankyou !! Appreciated :)

Collapse
 
greggcbs profile image
GreggHume

Sometimes debouncing cost more then running the code itself. Just as an FYI.

Some comments have been hidden by the post's author - find out more