You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
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
npmnpm
Version published
Weekly downloads
95K
3.86%
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