0

Once a user scrolls down to a particular point on a page i'd like javascript to kick in and force the scroll to a particular point below that.

For example, if I have 2 divs placed one on top of each other, once the user has scrolled 50% through the first div i'd like some animation to kick in and scroll them down to the starting point of the next div.

Does anyone know how to do this using React? I've found lots of packages that let me do this by having the user click a button but I want it to happen automatically in response to their scrolling.

user3472360
  • 321
  • 3
  • 17

3 Answers3

1

You could use CSS scroll snapping functionality to do what you want. it's really easy to set up :)

Here a lick to a tutorial : Scroll snapping CSS-Tricks

And here is a nice short video that demonstrate it directly : Scroll snapping video

Quentin Grisel
  • 3,383
  • 1
  • 6
  • 12
0

You could use the Intersection Observer API to detect the percentage of an element that is visible and trigger a callback that would set scrolltop on the desired element. Or use the element.scrollIntoView({behavior: "smooth"}); if you want to animate the scroll.

Nikola Dragić
  • 76
  • 7
0

I think the simplest way for you in React 16 would be using an intersection observer (like react-intersection-observer) and a couple of refs(or you could use some dedicated packages). The code would be something among these lines:

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>)
}

You could use any other similiar package (react-use-visibility) or even write your own hook or component which will call element.getBoundingClientRect(), detect if any of its properties (top,left,bottom, right) are positive and less than windows height and width (assuming you are looking to check if it's visible at all, you can totally use another element as visibility boundary) and fire a callback or fill flag once it's visible (see this question for reference). Personally I like react-intersection-observer the most since it's react-tuned and pretty customizable on top of that.

dkuznietsov
  • 266
  • 1
  • 8