Disable scrolling and preserve body width

When you disable scrolling with CSS overflow: hidden while there is a vertical scrollbar present, on some Windows browsers the scrollbar disappears and the body element will stretch to the right. This will make center or absolute positioned elements also stretch to the right. With unscroll you can disable scrolling without this side effect, it will adjust the body and custom elements to compansate for the missing scrollbar.

Install

npm install unscroll

Or download at github.com/StephanWagner/unscroll.

Usage

Simply call unscroll() to make the page unscrollable. When the browser removes the vertical scrollbar, the body element will be adjusted with a padding to prevent elements from "jumping" to the right.

<button onclick="unscroll()">Make page unscrollable</button>

When you have absolute or fixed positioned elements on your page, you might want to add the adjustment to those elements as well. You can pass those elements selectors into unscroll:

unscroll('#adjust-me-too')

unscroll(['#adjust-me-too', '.and-me'])

By default, unscroll will add the scrollbar width to the right padding of the element. In some cases you might want to use another CSS attribute, like right. To do that, you can pass the elements selector together with the desired attribute:

unscroll([['#adjust-right-attribute', 'right'], '#adjust-default'])

To enable scrolling again, use unscroll.reset().

<button onclick="unscroll.reset()">Make page scrollable</button>