Why set "overflow" on both html and body?

I noticed many css plugins when setting page overflow are hidden (for example), they use to set both html and body, for example:

html, body {
    overflow: hidden;
}

      

For example fullpage.js does this.

What is the exact difference between setting it to body and html?
Is this a cross-browser trick?

+3


source to share


1 answer


This is a CSS trick to prevent unwanted scrollbars, especially horizontal bars. What it prevents is more than the rendered html or body, therefore it prevents scrolling. Here is the indsths csstricks article: https://css-tricks.com/findingfixing-unintended-body-overflow/

However, you will notice that in the end he mentions that overflow hidden in the body (and html) is not recommended.



In the case of fullpage.js, this is fine because they deliberately try to hide the scrollbars so that their animations can display off-screen content.

+1


source







All Articles