I know this is an ancient question, but I just thought that I'd weigh in.
I'm using disableScroll. Simple and it works like in a dream.
I have had some trouble disabling scroll on body, but allowing it on child elements (like a modal or a sidebar). It looks like that something can be done using disableScroll.on([element], [options]);
, but I haven't gotten that to work just yet.
The reason that this is prefered compared to overflow: hidden;
on body is that the overflow-hidden can get nasty, since some things might add overflow: hidden;
like this:
... This is good for preloaders and such, since that is rendered before the CSS is finished loading.
But it gives problems, when an open navigation should add a class to the body
-tag (like <body class="body__nav-open">
). And then it turns into one big tug-of-war with overflow: hidden; !important
and all kinds of crap.