Page Locker

Live Demo

Motivation

On opening a modal window you have to prevent your main page from scrolling, so generally you can just set "overflow: hidden" on document.documentElement, but it won't work with iOS devices, so there is a need for a little bit tricky way via using "position: fixed" and setting the scroll position. So we can just use two simple methods to lock and unlock a page.

Installation

Use the package manager npm for installation.

``
$ npm install @deleteagency/page-locker
`

Usage

`scss
html {
&.is-blocked {
overflow: hidden;
}

&.is-blocked-touch {
position: fixed;
overflow-y: scroll;
width: 100%;
height: auto;
}
}
`

`js
import { PageLocker } from '@deleteagency/page-locker';

const pageLocker = new PageLocker();

pageLocker.lock('modal');
`

API

$3

#### retainerId

Required

Type: string

$3

#### retainerId

Required

Type: string`

License