react-scroll-sensor

Get the scroll positions of the window object in your component

Usage

You can use this to build a sticky div which moves around with the cursor.

import ScrollIndicator from "react-scroll-indicator";

<ScrollIndicator throttleDelay={300}>
  {(scrollX, scrollY) => (
    <p
      style={{
        transition: "all 1s ease",
        position: "relative",
        top: `${scrollY}px`,
        flex: "0 0 200px"
      }}
    >
      Hello
    </p>
  )}
</ScrollIndicator>;

Props

| Prop | Description | Type | Values | | ------------- | -------------------------------------------------------- | ------ | ------------- | | throttleDelay | The time in milliseconds in which to throttle the event. | Number | default 300 |

Render props

| Render prop | Description | Type | Values | | ----------- | ------------------------------------------------------------------------------------------------------------------- | ------- | ---------- | | scrollX | window.scrollX rendered | Number | 0 | | scrollY | window.scrollY | Number | 0 | | mounted | Whether react-scroll-sensor has already mounted. If it's not, then it's the first render and scroll positions are 0 | Boolean | true/false |

Enjoy 🎆