A React component to lock scrolling on the webpage.
npm install scroll-lock-reactA React component to lock scrolling on a section of your webpage and provide a scroll-based counter to its children.
counter prop to child components based on scroll position.``bash`
npm install scroll-lock-react
`jsx
import ScrollLock from 'scroll-lock-react';
const MyComponent = () => (
);
// MyChildComponent will receive a counter prop`
const MyChildComponent = ({ counter }) => (
Scroll Counter: {Math.round(counter)}
);
| Prop | Type | Required | Description |
|-----------|----------|----------|-----------------------------------------------------------------------------|
| id | string | Yes | Unique identifier for the scroll lock section. |maxCount
| | number | Yes | The maximum value the counter can reach as you scroll through the section. |duration
| | number | Yes | Controls the height of the scrollable area (influences scroll sensitivity). |children
| | ReactNode| Yes | Child component(s) to render inside the scroll lock. |
Works section, a counter value is calculated based on your scroll position.
- This counter is passed as a prop to each child element of ScrollLock if the child is a valid React element.
- The value of counter ranges from 0 to maxCount.
- The counter updates in real-time as the user scrolls or touches the section.$3
`jsx
const MyChildComponent = ({ counter }) => (
Current value: {counter}
);
`Styling
The component includes a default CSS file for layout and sticky positioning. You can override these styles by targeting the following classes:
-
-
-