Powered By GE-COMPONENTS From YY GFE TEAM

English | 简体中文

It provided useSmoothScroll hook for finishing smooth scroll behaviour in react component, and useScrollWatch to return some information in scroll container.

It 's a more convenient way to replace native scrollTo api.

Storybook Docs are Here.

• 🚀 You don't need to warn about compatibility, it use requsetAnimationFrame api to finish smooth scroll behaviour.

• 👉 Provide direction option ,you can set x for horizontal, y for vertical.

• 💧 No Third Party dependencies, light and pure.

npm install react-smooth-scroll-hook

import React, { useRef } from 'react'; import useSmoothScroll from 'react-smooth-scroll-hook'; export const Demo = () => { // A custom scroll container const ref = useRef(null); // Also support document.body / document.documentElement, and you don't need to set a ref passing to jsx const ref = useRef(document.body); const { scrollTo } = useSmoothScroll({ ref, speed: 100, direction: 'y', }); return ( <> <button onClick={() => scrollTo('#item-20')}>scrollTo('#item-20')</button> <div // if use custom scroll container, pass ref ref={ref} style={{ overflowY: 'scroll', maxHeight: '200px', }} > {Array(100) .fill(null) .map((_item, i) => ( <div key={i} id={`item-${i}`}> item-{i} </div> ))} </div> </> ); };

• ref: RefObject<HTMLElement>, container which set as overflow: scroll, if scroll whole document, pass ref = useRef(document.documentElement) or useRef(document.body).
• speed: Distance in one frame to move in requestAnimationFrame mode, defaults to 100, if not provide, speed depends on native API scrollTo.
• direction: Scroll direction, x for horizontal or y for vertical.
• threshold: an error range distance for status of scrolling finished, .defaults to 1, unit of px.

• scrollTo (string|number) => void

  • Pass number: the distance to scroll, e.g. scrollTo(400)
  • Pass string: the element seletor you want to scrollTo, meanwhile passing to document.querySelector, e.g. scrollTo('#your-dom-id')

• reachedTop boolean: Whether it has reached the top of refContainer

• reachedBottom boolean: Whether it has reached the bottom of refContainer

• CodeSandbox
• Storybook

Proviede a list of dom like below, and pass the parent container ref to hook, it return the scrollbar current state of scrollTop, curIndex, curItem.

import React, { useRef } from 'react'; import { useScrollWatch } from 'react-smooth-scroll-hook'; export const ScrollConatainerMode = () => { const ref = useRef(null); const { scrollTop, curIndex, curItem } = useScrollWatch({ ref, list: [ { href: '#item-0', }, { href: '#item-10', }, { href: '#item-20', }, ], }); return ( <> <h2>Scroll Container Mode</h2> <div> <p> <strong>scrollTop:</strong> {scrollTop} </p> <p> <strong>curIndex:</strong> {curIndex} </p> <p> <strong>curHref:</strong> {curItem?.href} </p> </div> <div style={{ padding: '10px', maxHeight: '200px', overflowY: 'scroll', }} ref={ref} > {Array(100) .fill(null) .map((_item, i) => ( <div key={i} id={`item-${i}`}> item-{i} </div> ))} </div> </> ); };

• list Array({href, offset}): href is elemet selector string, which passing to querySelector, such as #element-id
• ref: the same as ref of useSmoothScroll

• scrollTop number: current scrollTop of scroll container.
• curIndex number: current Index of list
• curItem {href, offset}: current Item of list

• CodeSandbox
• Storybook