@klarna/disable-scroll

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

Stats

StarsIssuesVersionUpdatedCreatedSize
@klarna/disable-scroll
1490.0.54 years ago4 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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.