Skip to content
Make your page unscrollable and adjusts content elements to compensate for the missing scrollbar.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENCE
README.md
demo.css
demo.html
package-lock.json
package.json
unscroll.js
unscroll.test.js

README.md

unscroll

Make your page unscrollable and adjusts content elements to compensate for the missing scrollbar.

Install

npm install 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>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.