CODEWITHSUNDEEP
javascripthtmlcssreactjs
user3472360
user3472360

Reputation: 2075

Force scroll down to a particular point after some user scrolling [React]

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.

Upvotes: 0

Views: 1431

Answers (3)

dkuznietsov
dkuznietsov

Reputation: 298

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.

Upvotes: 0

Quentin Grisel
Quentin Grisel

Reputation: 4987

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

Upvotes: 1

Nikola Dragić
Nikola Dragić

Reputation: 106

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.

Upvotes: 0

Related Questions