React useScrollHooks

Install

yarn add react-use-scroll-hooks

Quick Start

useScroll Hooks

import classNames from 'classnames'
import useScroll from 'react-use-scroll-hooks'

function App({ children }: React.PropsWithChildren<{}>) {
  const { scrollRef, scrollState } = useScroll()

  const className = classNames({
    wrapper: true,
    'wrapper-shadow-left': scrollState.leftScrollable,
    'wrapper-shadow-right': scrollState.rightScrollable
  })

  return (
    <div className={className}>
      <ul className="list" ref={scrollRef}>
        {children}
      </ul>
    </div>
  )
}

Scroll Container

import { ScrollContainer } from 'react-use-scroll-hooks'

export function Container() {
  const [items, setItems] = useState(['foo', 'bar'])

  const handleAddItem = () => {
    setItems((items) => [...items, `item:${items.length + 1}`])
  }

  return (
    <div>
      <ScrollContainer classNames='container'>
        <ul className="list">
          {items.map((it) => (
            <li className="item" key={it}>{it}</li>
          ))}
        </ul>
      </ScrollContainer>
      <button onClick={handleAddItem}>add Item</button>
    </div>
  )
}

Reference

useScroll

const { scrollRef, scrollState } = useScroll()

• scrollRef: React.RefCallback<HtmlElement> - The ref callback for the scrollable element.

why?: https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

• scrollState: ScrollState - The scroll state of the scrollable element.

  • horizontal state:

  • hScrollable: boolean - Whether the scrollable element is horizontally scrollable.

  • leftScrollable: boolean - Whether the scrollable element can be scrolled to the left.

  • rightScrollable: boolean - Whether the scrollable element can be scrolled to the right.

  • scrollWidth: number - The scrollWidth of the scrollable element.

  • clientWidth: number - The clientWidth of the scrollable element.

  • reachLeft: number - Whether the scrolling element has been scrolled to the left.

  • reachRight: number - Whether the scrolling element has been scrolled to the right.

  • vertical state:

  • vScrollable: boolean - Whether the scrollable element is vertical scrollable.

  • topScrollable: boolean - Whether the scrollable element can be scrolled to the top.

  • bottomScrollable: boolean - Whether the scrollable element can be scrolled to the bottom.

  • scrollHeight: number - The scrollHeight of the scrollable element.

  • clientHeight: number - The clientHeight of the scrollable element.

  • reachTop: number - Whether the scrolling element has been scrolled to the top.

  • reachBottom: number - Whether the scrolling element has been scrolled to the bottom.

ScrollContainer

<ScrollContainer onChange={} style={} classNames={} children as={} htmlProps={} />

• onChange: function - The callback function when the scroll state changes.
• style: object - The style of the scrollable container element.
• classNames: ScrollableContainerClassNames - The class name of the scrollable container element. string or object:
  • normal: string - The normal class name of the scrollable container element.
  • leftScrollable: string - The class name of the scrollable container element when scrollable element has leftScrollable state.
  • rightScrollable: string - The class name of the scrollable container element when scrollable element has rightScrollable state.
  • topScrollable: string - The class name of the scrollable container element when scrollable element has topScrollable state.
  • bottomScrollable: string - The class name of the scrollable container element when scrollable element has bottomScrollable state.

A single name can be provided, which will be suffixed for each stage. For example, container will be suffixed to container-left-scrollable, container-right-scrollable, container-top-scrollable, container-bottom-scrollable.

• as: ComponentType - ScrollContainer render div by default, You can change this behavior by providing a as prop.
• children: ReactElement|(ref, scrollState)=>ReactNode - The children of the scrollable container element.(That is, scrollable elements). If that type is ReactElement, it must be able to receive ref props. (that is: React.forwardRef wrapped function component, html element, or class component)
• htmlProps: object - The html props of the scrollable container element.

How

callbackRef

https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

Listen Scroll Event

https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event

mutationObserver observe dynamic content

Why mutationObserver? https://stackoverflow.com/questions/44428370/detect-scrollheight-change-with-mutationobserver

Third-Party Resources

scroll-shadows-with-javascript