Skip to content

Instantly share code, notes, and snippets.

@Izhaki

Izhaki/useAutoScrollToBottom.ts

Last active June 27, 2021 22:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Izhaki/ea32f4d3813a27bd4e9d137aff7a71c1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Izhaki/ea32f4d3813a27bd4e9d137aff7a71c1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Izhaki revised this gist Jun 27, 2021. 1 changed file with 20 additions and 17 deletions.
    37 changes: 20 additions & 17 deletions useAutoScrollToBottom.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -4,25 +4,28 @@ export default function useAutoScrollToBottom(deps) {
    const paused = React.useRef(false);
    const element = React.useRef<HTMLDivElement | null>(null);

    const ref = React.useCallback((el) => {
    function onWheel() {
    const { scrollTop, scrollHeight, offsetHeight } = element.current || {
    scrollTop: 0,
    scrollHeight: 0,
    offsetHeight: 0,
    };
    paused.current = scrollHeight - (scrollTop + offsetHeight) > 4;
    }

    if (el) {
    element.current = el;
    el.addEventListener('wheel', onWheel, { passive: true });
    } else if (element.current !== null) {
    element.current.removeEventListener('wheel', onWheel);
    element.current = null;
    }
    const onWheel = React.useCallback(() => {
    const { scrollTop, scrollHeight, offsetHeight } = element.current || {
    scrollTop: 0,
    scrollHeight: 0,
    offsetHeight: 0,
    };
    paused.current = scrollHeight - (scrollTop + offsetHeight) > 4;
    }, []);

    const ref = React.useCallback(
    (el) => {
    if (el) {
    element.current = el;
    el.addEventListener('wheel', onWheel, { passive: true });
    } else if (element.current !== null) {
    element.current.removeEventListener('wheel', onWheel);
    element.current = null;
    }
    },
    [onWheel]
    );

    React.useLayoutEffect(() => {
    if (element.current && !paused.current) {
    element.current.scrollTop = element.current.scrollHeight;
  2. Izhaki revised this gist Jun 25, 2021. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions useAutoScrollToBottom.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    import React from 'react';

    export default function useAutoScrollToBottom(deps) {
    const pause = React.useRef(false);
    const paused = React.useRef(false);
    const element = React.useRef<HTMLDivElement | null>(null);

    const ref = React.useCallback((el) => {
    @@ -11,7 +11,7 @@ export default function useAutoScrollToBottom(deps) {
    scrollHeight: 0,
    offsetHeight: 0,
    };
    pause.current = scrollHeight - (scrollTop + offsetHeight) > 4;
    paused.current = scrollHeight - (scrollTop + offsetHeight) > 4;
    }

    if (el) {
    @@ -24,9 +24,10 @@ export default function useAutoScrollToBottom(deps) {
    }, []);

    React.useLayoutEffect(() => {
    if (element.current && !pause.current) {
    if (element.current && !paused.current) {
    element.current.scrollTop = element.current.scrollHeight;
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, deps);

    return { ref };
  3. Izhaki created this gist Jun 25, 2021.
    33 changes: 33 additions & 0 deletions useAutoScrollToBottom.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    import React from 'react';

    export default function useAutoScrollToBottom(deps) {
    const pause = React.useRef(false);
    const element = React.useRef<HTMLDivElement | null>(null);

    const ref = React.useCallback((el) => {
    function onWheel() {
    const { scrollTop, scrollHeight, offsetHeight } = element.current || {
    scrollTop: 0,
    scrollHeight: 0,
    offsetHeight: 0,
    };
    pause.current = scrollHeight - (scrollTop + offsetHeight) > 4;
    }

    if (el) {
    element.current = el;
    el.addEventListener('wheel', onWheel, { passive: true });
    } else if (element.current !== null) {
    element.current.removeEventListener('wheel', onWheel);
    element.current = null;
    }
    }, []);

    React.useLayoutEffect(() => {
    if (element.current && !pause.current) {
    element.current.scrollTop = element.current.scrollHeight;
    }
    }, deps);

    return { ref };
    }