🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

react-scrolllock

Package Overview
Dependencies
Maintainers
3
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-scrolllock

Prevent scroll on the body when component is mounted.

5.0.1
latest
Source
npm
Version published
Weekly downloads
85K
-11.09%
Maintainers
3
Weekly downloads
 
Created
Source

React Scroll Lock

Prevent scroll on the <body /> when a component is mounted.

Install

yarn add react-scrolllock

Usage

import ScrollLock, { TouchScrollable } from 'react-scrolllock';

class Modal extends Component {
  state = { lockScroll: false }
  render() {
    return (
      <div>
        ...
        // the lock accepts a single child element, which supports touch-scrolling.
        <ScrollLock>
          <ElementWithScrollableContent>...</ElementWithScrollableContent>
        </ScrollLock>

        // if your app structure doesn't allow wrapping like above, the `TouchScrollable`
        // component is exposed as a named export.
        <ScrollLock />
        <TouchScrollable>
          <ElementWithScrollableContent>...</ElementWithScrollableContent>
        </TouchScrollable>

        // you can also toggle the lock based on some state.
        <ScrollLock isActive={this.state.lockScroll} />
      </div>
    );
  }
}

Props

ScrollLock

PropertyDescription
accountForScrollbars booleanDefault: true -- Whether or not to replace the scrollbar width when active.
isActive booleanDefault: true -- Whether or not the lock is active.
children elementDefault: null -- This element is wrapped internally by the TouchScrollable component.

TouchScrollable

Wrap an element in the TouchScrollable component if you need an area that supports scroll on mobile.

This is necessary because the touchmove event is explicitly cancelled — iOS doesn't observe overflow: hidden; when applied to the <body /> element 😢

PropertyDescription
children elementref => element

Keywords

react

FAQs

Package last updated on 19 Feb 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts