- ref: RefObject, 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: Judge scroll is finished has an error range, .defaults to 1.

#### Returns of Hook

- 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

- scrollToPage (number) => void: Pass page(number), which scroll to a distance as multiples of container size(offsetWidth/offsetHeight)
.e.g scrollToPage(1),scrollToPage(-1)

- refreshState () => void: Manually refresh the state of reachTop and reachBottom, possibly useful in some situation.

- refreshSize () => void: Manually refresh the size of ref container, possibly useful in some situation.

$3

- CodeSandbox
- Storybook

useScrollWatch

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.

$3

`tsx
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 (
<>


Scroll Container Mode