scroll-lock

A Javascript utility library for the native scrollbar. Also preventing scroll in iOS and another touch devices.

README на русском.

Install

Via npm npm install scroll-lock --save

import scrollLock from 'scroll-lock';
//OR
var scrollLock = require('scroll-lock');

Via script tag

<script src="/path/to/node_modules/scroll-lock/dist/scroll-lock.min.js"></script>

window.scrollLock;

Pitfall # 1 (Disabling scrolling)

When the scrollLock.hide() method is called, also scrolling turns off in iOS and other touch devices (essence of the problem). If we consider more specifically, scroll-lock captures touch events and processes them, in which case it causes preventDefault(). So if you call scrollLock.hide() and specif any element overflow-y value scroll, then the element will not scroll (we are talking only about the touch devices).
If you wanna make any element “scrollable”, specify to that element sl--scrollable class name (it must have overflow-y property, scroll or auto).

<div class="modal-scroll sl--scrollable"></div>

.modal-scroll {
	overflow: auto;
	-webkit-overflow-scrolling: touch; /* smooth scroll in iOS */
}

Live example: https://fl3nkey.github.io/scroll-lock/demos/index.html
Example sources: https://codepen.io/FL3NKEY/pen/YaQPrg

Pitfall #2 (Width of the scrollbar and flickering)

What we are talking about? When body has overflow property set to hidden, the width of the container increases to the width of the scrollbar, therefore appears unpleasant flickering effect. Explanation: for example the container width is 1200px, and the width of the window 1217px (width of the container + width of the scrollbar) then after scrollLock.hide() the width of the container will take the width of the window.
But to evolve this, scroll-lock calculates the width of the scrollbar before disabling scrolling and fills the gap.
But this does not works with the elements that have a position property set to fixed. In this case you must specify to the element sl--fillgap class name.

<div class="fixed-element sl--fillgap"></div>

After calling the method scrollLock.hide():

<body style="overflow: hidden; padding-right: ${scrollbar-width};">
	<div class="fixed-element sl-fillgap" style="padding-right: ${scrollbar-width};">...</div>
</body>

You can also change the method of fill gap and selectors.

Live example: https://fl3nkey.github.io/scroll-lock/demos/fill_gap.html
Example sources: https://codepen.io/FL3NKEY/pen/JLeJqY

Methods

hide()

Hide body scrollbar and disable scroll.

scrollLock.hide();

show()

Show body scrollbar.

scrollLock.show();

toggle()

Toggle body scrollbar.

scrollLock.toggle();

getState()

Get state of body scrollbar.

scrollLock.getState(); //true
scrollLock.hide();
scrollLock.getState(); //false

getWidth()

Get width of body scrollbar.

scrollLock.getWidth();

getCurrentWidth()

Get current width of body scrollbar.

scrollLock.getCurrentWidth();

setFillGapMethod(method)

Set fill gap method.
Type: String
Available values:

padding: padding-right: ${scroll-width};
margin: margin-right: ${scroll-width};
width: width: calc(100% - ${scroll-width});

Default value: padding

scrollLock.setFillGapMethod('width');

setFillGapSelectors(selectors)

Set fill gap selectors.
Type: Array
Available values: Array of selectors.
Default value: ['body']

scrollLock.setFillGapSelectors(['body', '.some-element', '#another-element']);

🙌 I would like to thank “Armani” for the translation. 🙌

andreypopov / scroll-lock