@klarna/disable-scroll

Fix the screen to the current position and get a canvas where to draw on top of it

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@klarna/disable-scroll
15110.0.55 years ago6 years agoMinified + gzip package size for @klarna/disable-scroll in KB

Readme

@klarna/disable-scroll
Build Status npm version
example of fixing a layer on top of a scrollable body
Demo of fixing a layer on top of a scrollable body. You can find it in https://klarna.github.io/disable-scroll

Anchor the body to it’s current scroll position. This is super useful to be able to fix a layer on top and put modals in it.
This works around known issues of positioning modals with position: fixed.
This library is super small and has no dependencies.

Installation

npm install --save @klarna/disable-scroll

Usage

import setupDisableScroll from '@klarna/disable-scroll'

// Initialize the tool
const {pin, release, container} = setupDisableScroll(window)

pin() // Sticks the body to the current position
release() // Releases the body so it becomes scrollable again

const p = document.createElement('p')
p.innerText = 'This will be positioned in the floating layer'
container.appendChild(p)

API

The @klarna/disable-scroll lib exposes a function that takes the window and returns the following functions:
  • pin: Sets the top of the body to match the current scrollTop, and then resizes the body to be the same width and height as the window.
  • release: Resets the scrollTop from the top of the body, and then resets the body to its original size.
  • container gives a reference to an element positioned on top of the body that can be targeted for putting modals when the body is pinned.

License

Apache 2.0