Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

📜 React component that monitors scroll events to trigger callbacks when it enters, exits and progresses through the viewport. All callback include the progress and velocity of the scrolling, in the event you want to manipulate stuff based on those values.

Stars: ✭ 126 (-67.94%)

Mutual labels: scrolling, scroll

onscroll-effect

A tiny JavaScript library to enable CSS animations when user scrolls.

Stars: ✭ 35 (-91.09%)

Mutual labels: scrolling, scroll

Mac Mouse Fix

Mac Mouse Fix - A simple way to make your mouse better.

Stars: ✭ 362 (-7.89%)

Mutual labels: scroll, scrolling

Scrollprogress

🛸 Light weight library to observe the viewport scroll position

Stars: ✭ 148 (-62.34%)

Mutual labels: component, scroll

volx-recyclerview-fast-scroll

An easy to use implementation for fast scroll recyclerview

Stars: ✭ 34 (-91.35%)

Mutual labels: scrolling, scroll

scrollparent.js

A function to get the scrolling parent of an html element.

Stars: ✭ 51 (-87.02%)

Mutual labels: scrolling, scroll

srraf

Monitor scrolling and resizing without event listeners.

Stars: ✭ 26 (-93.38%)

Mutual labels: scrolling, scroll

scroll-sync-react

A scroll syncing library for react that is up to date

Stars: ✭ 49 (-87.53%)

Mutual labels: scrolling, scroll

react-is-scrolling

Simply detect if users are scrolling in your components in a declarative API

Stars: ✭ 17 (-95.67%)

Mutual labels: scrolling, scroll

NoobScroll

A lightweight jQuery Plugin that add some cool function to make scrolling more fun [Archive]

Stars: ✭ 43 (-89.06%)

Mutual labels: scrolling, scroll

Ngx Scroll To

Scroll to any element to enhance scroll-based features in you app. Works for Angular 4+, both AoT and SSR. No dependencies.

Stars: ✭ 269 (-31.55%)

Mutual labels: scroll, scrolling

really-smooth-scroll

A script that smoothen scrolling in the browser

Stars: ✭ 21 (-94.66%)

Mutual labels: scrolling, scroll

React Scrollbars Custom

The best React custom scrollbars component

Stars: ✭ 576 (+46.56%)

Mutual labels: component, scroll

React Scroll Parallax

🔮 React components to create parallax scroll effects for banners, images or any other DOM elements

Stars: ✭ 1,699 (+332.32%)

Mutual labels: component, scroll

use-scroll-direction

A simple, performant, and cross-browser hook for detecting scroll direction in your next react app.

Stars: ✭ 24 (-93.89%)

Mutual labels: scrolling, scroll

Phytouch

Smooth scrolling, rotation, pull to refresh, page transition and any motion for the web - 丝般顺滑的触摸运动方案

Stars: ✭ 2,854 (+626.21%)

Mutual labels: scroll, scrolling

View All Similar Projects ➔

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

Property	Description
accountForScrollbars `boolean`	Default: `true` -- Whether or not to replace the scrollbar width when active.
isActive `boolean`	Default: `true` -- Whether or not the lock is active.
children `element`	Default: `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 😢

Property	Description
children `element`	`ref => element`

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 393

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (19) 🔗