@klarna/disable-scroll
@klarna/disable-scroll
npm i @klarna/disable-scroll
@klarna/disable-scroll

@klarna/disable-scroll

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

by klarna

0.0.5 (see all)License:Apache-2.0TypeScript:Not Found
npm i @klarna/disable-scroll
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

Downloads/wk

3

GitHub Stars

15

LAST COMMIT

3yrs ago

MAINTAINERS

2

CONTRIBUTORS

4

OPEN ISSUES

0

OPEN PRs

10
VersionTagPublished
0.0.5
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate