Why setting `overflow` to both on html and body?

Question

I just noticed that many css plugins, when setting the page overflow to hidden (for example), they use to set it both to html and body, like this:

html, body {
    overflow: hidden;
}

For example, fullpage.js does like this.

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

Answer 1

This is a CSS trick to prevent unwanted scroll bars, particularly horizontal bars. What it prevents is anything wider than the html or body being displayed therefore preventing the scrollbars. Here is an indepths csstricks article: https://css-tricks.com/findingfixing-unintended-body-overflow/

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

In the case of fullpage.js, it is fine because they specifically trying to hide the scroll bars so that their animations can bring in the content that is off screen.