useScroll

Hook that allows you to control scroll a element

sensors

test coverage

Last changed: last month

Installation

Library

CLI

Manual

import { useScroll } from '@siberiacancode/reactuse';

Usage

const scrolling = useScroll(ref, options);
// or
const scrolling = useScroll(ref, () => console.log('callback'));
// or
const { ref, scrolling } = useScroll(options);
// or
const { ref, scrolling } = useScroll(() => console.log('callback'));

Demo

source

Api

Parameters

Name	Type	Default	Note
options.behavior?	ScrollBehavior	auto	The behavior of scrolling
options.offset.left?	number	0	The left offset for arrived states
options.offset.right?	number	0	The right offset for arrived states
options.offset.top?	number	0	The top offset for arrived states
options.offset.bottom?	number	0	The bottom offset for arrived states
options.onScroll?	(params: UseScrollCallbackParams, event: Event) => void	-	The callback function to be invoked on scroll
options.onStop?	(event: Event) => void	-	The callback function to be invoked on scroll end

Returns

boolean

Parameters

Name	Type	Default	Note
callback?	(params: UseScrollCallbackParams, event: Event) => void	-	The callback function to be invoked on scroll

Returns

boolean

Parameters

Name	Type	Default	Note
target	Target	-	The target element to scroll
options.behavior?	ScrollBehavior	auto	The behavior of scrolling
options.offset.left?	number	0	The left offset for arrived states
options.offset.right?	number	0	The right offset for arrived states
options.offset.top?	number	0	The top offset for arrived states
options.offset.bottom?	number	0	The bottom offset for arrived states
options.onScroll?	(params: UseScrollCallbackParams, event: Event) => void	-	The callback function to be invoked on scroll
options.onStop?	(event: Event) => void	-	The callback function to be invoked on scroll end

Returns

[StateRef<Target>, boolean]

Parameters

Name	Type	Default	Note
target	Target	-	The target element to scroll
callback?	(params: UseScrollCallbackParams, event: Event) => void	-	The callback function to be invoked on scroll

Returns

[StateRef<Target>, boolean]

Type declaration

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export interface UseScrollOptions {
  /** The on scroll callback */
  onScroll?: (params: UseScrollCallbackParams, event: Event) => void;

  /** The on end scroll callback */
  onStop?: (event: Event) => void;

  /** Offset arrived states by x pixels. */
  offset?: {
    left?: number;
    right?: number;
    top?: number;
    bottom?: number;
  };
}

export interface UseScrollCallbackParams {
  /** The element x position */
  x: number;
  /** The element y position */
  y: number;
  /** State of scroll arrived */
  arrived: {
    left: boolean;
    right: boolean;
    top: boolean;
    bottom: boolean;
  };
  /** State of scroll direction */
  directions: {
    left: boolean;
    right: boolean;
    top: boolean;
    bottom: boolean;
  };
}

export interface UseScroll {
  (target: HookTarget, callback?: (params: UseScrollCallbackParams, event: Event) => void): boolean;

  (target: HookTarget, options?: UseScrollOptions): boolean;

  <Target extends Element>(
    callback?: (params: UseScrollCallbackParams, event: Event) => void,
    target?: never
  ): {
    ref: StateRef<Target>;
    scrolling: boolean;
  };

  <Target extends Element>(
    options?: UseScrollOptions,
    target?: never
  ): {
    ref: StateRef<Target>;
    scrolling: boolean;
  };
}

Source

Source • Demo

Contributors

D

debabin

E

Evgen41kk