@klarna/disable-scroll

0.0.5 • Public • Published

@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

Readme

Keywords

none

Package Sidebar

Install

npm i @klarna/disable-scroll

Weekly Downloads

0

Version

0.0.5

License

Apache-2.0

Last publish

Collaborators