Принудительная прокрутка вниз до определенной точки после некоторой прокрутки пользователем [React]

Question

Как только пользователь прокручивает страницу вниз до определенной точки, я бы хотел, чтобы javascript включил ее и переместился к определенной точке под ней.

Например, если я 2 элемента div расположены один над другим, как только пользователь прокрутил 50% до первого элемента div, я хотел бы добавить анимацию и прокрутить их вниз до начальной точки следующего элемента div.

Кто-нибудь знает, как это сделать с помощью React? Я нашел много пакетов, которые позволяют мне делать это, когда пользователь нажимает кнопку, но я хочу, чтобы это происходило автоматически в ответ на их прокрутку.

Answer 1

Вы можете использовать функциональность CSS scroll snapping, чтобы делать то, что вы хотите. это действительно легко настроить:)

Вот пример учебника: Снимок прокрутки CSS -Tricks

И вот хорошее короткое видео, которое демонстрирует это напрямую: Прокрутка с привязкой видео

Answer 2

Я думаю, что самым простым способом для вас в React 16 было бы использовать наблюдателя на пересечении (например, react-intersection-observer) и пару ссылок (или вы могли бы использовать несколько выделенных пакетов). Код будет что-то из этих строк:

import React, {useRef} from 'react';
import { useInView } from 'react-intersection-observer';

export default props => {
    const refToScroll = React.useRef();
    // be sure to check out all the options available
    const [refFromScroll, refFromScrollVisible] = useInView();

    useEffect(() => {
        // as soon as refFromScroll is visible, your scroll logic fires
        if(refFromScrollVisible && refToScroll.current) {
            // add more options as you like
            refToScroll.current.scrollIntoview({behavior: "smooth"})
        }
    }, [refFromScrollVisible, refToScroll.current]);

    return (<div>
        {/*as soon as it is visible your scrolling logic will be executed*/}
        <div ref={refFromScroll} />
        {/*your other components*/}
        {/*scroll to this div*/}
        <div ref={refToScroll} />    
    </div>)
}

Вы можете использовать любой другой подобный пакет (react-use-visibility) или даже написать свой собственный хук или компонент, который будет вызывать element.getBoundingClientRect(), обнаружить, если какой-либо из его свойства (top, left, bottom, right) положительны и меньше чем windows height и width (если вы хотите проверить, виден ли он вообще, вы можете полностью использовать другой элемент в качестве границы видимости) и вызовите флаг обратного вызова или заполнения, как только он станет видимым (см. этот вопрос для справки). Лично мне больше всего нравится react-intersection-observer, так как он настроен и довольно настраиваемый.

Answer 3

Вы можете использовать API наблюдателя пересечения , чтобы определить процент видимого элемента и вызвать обратный вызов, который установит scrolltop для нужного элемента. Или используйте element.scrollIntoView({behavior: "smooth"});, если вы хотите анимировать свиток.