A hack to compensate for scrollbar size for modals
npm install scrollbar-compensate
npm i scrollbar-compensate
`
A hack to compensate for scrollbar size for modals
Problem
Usually, you would set overflow: hidden to body when the modal mounts. However, this causes a weird adjustment to the layout (because the scrollbar disappears). This mostly affects Windows/Linux users, and some OSX users that use a mouse (because it forces the scrollbar to appear).
As an example, compare Semantic UI's Modal and TWBS' Modal. TWBS solved this by adding a padding-right to the body when the modal mounts.
What It Does
It adds an inline-style that adds a padding-right to the provided selectors. It appends the following to head:
`html
`
Take note that the 15px value here may vary depending on your scrollbar width. Typically, OS X has this set to 15px.
Usage
compensate(selectors) — This module only exposes a single function that accepts an array of elements as an argument. Usually, you pass class names here that are added to the body when a modal mounts.
`js
var compensate = require('scrollbar-compensate');
document.addEventListener('DOMContentLoaded', function() {
compensate(['.modal-open', '.overlay-enabled .global-nav']);
});
`
Note — If you're wondering why it's necessary to run compensate when the document loads: We're using the scrollbar-size` library internally which needs to be called after the document is ready.