scroll-lock-m5
Cross-browser JavaScript library to disable scrolling page
New features 2.0
- More advanced touch event handling algorithm
- Horizontal scrolling support
- Support for nested scrollable elements
- Support for nested textarea and contenteditable
- New API
Installation
Via npm or yarn
npm install scroll-lock# or yarn add scroll-lock
//es6 import; //or;scrollLock;//... //requireconst scrollLock = ;scrollLock;//...
Via script tag
The es6 import will be used further in the examples, but these methods will also be available from the scrollLock
object.
Disable page scrolling
When you call the disablePageScroll
method, scrolling is also disabled in iOS and other touch devices (essence of the problem). But scrolling on touch devices will be disabled on all elements. To do this, you must explicitly specify which element will scroll on the page.
; //Get the element that should scroll when page scrolling is disabledconst $scrollableElement = document; //Pass the element to the argument and disable scrolling on the page; // Also, pass the element to the argument and enable scrolling on the page;
Alternatively, you can specify the data-scroll-lock-scrollable
attribute of the scrollable element.
https://fl3nkey.github.io/scroll-lock/demos/index.html#ex-main
Live demo:textarea
and contenteditable
If a textarea
or contenteditable
is nested in a scrollable element, then do not worry, they will scroll without explicit indication.
https://fl3nkey.github.io/scroll-lock/demos/index.html#ex-inputs
Live demo:Filling the gap
When the disablePageScroll
method is called, the scroll-lock indicates overflow: hidden;
for body
, thereby hiding the scroll bar. In some operating systems, the scroll bar has its physical width on the page, thus we get the effect of "displacement":
To prevent this, scroll-lock calculates the scroll bar width when calling the disablePageScroll
method and fills in the space for the body
element.
But this does not work for elements with fixed
positioning. To do this, you must explicitly indicate which element needs to fill in the space.
; //selector; //elementconst $fillGapElement = document;;
Or you can specify the data-scroll-lock-fill-gap
attribute.
https://fl3nkey.github.io/scroll-lock/demos/index.html#ex-fill-gap
Live demo:Queue
A call to the disablePageScroll
method creates a queue of calls. If you call the disablePageScroll
method twice in a row, and then enablePageScroll
, the page scrolling is not activated, because the enablePageScroll
method will need to be called a second time.
If for some reason you need to activate scrolling the page out of turn, use the clearQueueScrollLocks
method:
; ;;;; ;console; //false ;;console; //true
API
disablePageScroll(scrollableTarget)
Hides the scroll bar and disables page scrolling.
scrollableTarget
- (HTMLElement | NodeList | HTMLElement array
) scrollable element
; const $scrollableElement = document;;
enablePageScroll(scrollableTarget)
Shows the scroll bar and enables page scrolling.
scrollableTarget
- (HTMLElement | NodeList | HTMLElement array
) scrollable element
; const $scrollableElement = document;;
getScrollState()
Returns the state of the page scroll bar.
; console; //true;console; //false
clearQueueScrollLocks()
Clears the queue value.
; ;;;; ;console; //false ;;console; //true
getPageScrollBarWidth(onlyExists)
Returns the width of the scroll bar.
onlyExists
- (Boolean
) only if scroll bar is exists
Default value:false
; documentbodystyleoverflow = 'scroll';console; //Number;console; //Numberdocumentbodystyleoverflow = 'hidden';console; //Numberconsole; //0
getCurrentPageScrollBarWidth()
Returns the width of the scroll bar to specific moment.
; console; //Number;console; //0
addScrollableSelector(scrollableSelector)
Makes elements with this selector scrollable.
scrollableSelector
- (String | String array
) scrollable selector
Initial value:['[data-scroll-lock-scrollable]']
; ;;
removeScrollableSelector(scrollableSelector)
Makes elements with this selector not scrollable.
scrollableSelector
- (String | String array
) scrollable selector
; ;
addScrollableTarget(scrollableTarget)
Makes the element scrollable.
scrollableSelector
- (HTMLElement | NodeList | HTMLElement array
) scrollable element
; const $scrollableElement = document;;;
removeScrollableTarget(scrollableTarget)
Makes the element not scrollable.
scrollableSelector
- (HTMLElement | NodeList | HTMLElement array
) scrollable element
; const $scrollableElement = document;;
addLockableSelector(lockableSelector)
Makes elements with this selector lockable.
lockableSelector
- (String | String array
) lockable selector
Initial value:['[data-scroll-lock-lockable]']
; ;;
addLockableTarget(lockableTarget)
Makes the element lockable.
lockableTarget
- (HTMLElement | NodeList | HTMLElement array
) lockable element
; const $lockableElement = document;;;
addFillGapSelector(fillGapSelector)
Fills the gap with elements with this selector.
fillGapSelector
- (String | String array
) a fill gap selector
Initial value:['body', '[data-scroll-lock-fill-gap]']
; ;
removeFillGapSelector(fillGapSelector)
Returns the gap for elements with this selector.
fillGapSelector
- (String | String array
) a fill gap selector
; ;
addFillGapTarget(fillGapTarget)
Fills the gap at the element.
fillGapTarget
- (HTMLElement | NodeList | HTMLElement array
) a fill gap element
; const $fillGapElement = document;;
removeFillGapTarget(fillGapTarget)
Returns the gap at the element.
fillGapTarget
- (HTMLElement | NodeList | HTMLElement array
) a fill gap element
; const $fillGapElement = document;;
setFillGapMethod(fillGapMethod)
Changes the method of filling the gap.
fillGapMethod
- (String: 'padding', 'margin', 'width', 'max-width', 'none'
) gap-filling method
Default value:padding
; ;
refillGaps()
Recalculates filled gaps.
; ;
See also
🙌 🙌 I would like to thank “Armani” for the translation. 🙌 🙌