1. escriba un event.listener para el desplazamiento de la página (la etiqueta que contiene todo el texto) usando useRef en react-hooks

2. encuentre el valor del eje y de la referencia que acaba de crear donde desea dejar de desplazarse.

3. tiene un estado que contiene los porcentajes y un estado para el eje y en el que se encuentra ahora el usuario.

4. cuando los porcentajes no sean 100 y se alcance el valor deseado en el eje y de la referencia actual, detenga el desplazamiento para la referencia que definió anteriormente.

5. cuando los porcentajes cambiaron a 100, o el usuario se desplazó hacia arriba (lo que significa que el eje y actual es más pequeño que el punto de parada), permita el desplazamiento nuevamente.

¡Puedes usar CSS para hacer eso!

scroll-snap-stop es parte del módulo CSS Scroll Snap. El ajuste de desplazamiento se refiere a "bloquear" la posición de la ventana gráfica en elementos específicos de la página a medida que se desplaza la ventana (o un contenedor desplazable). Piense en un contenedor de ajuste de desplazamiento como poner un imán encima de un elemento que se adhiere a la parte superior de la ventana gráfica y obliga a la página a dejar de desplazarse allí mismo.

scroll-snap-stop le permite obligar al contenedor de ajuste de desplazamiento a ajustarse a un elemento en particular. Supongamos que se está desplazando dentro de un contenedor de ajuste de desplazamiento y le dio un giro gigante de la rueda del mouse. Normalmente, el navegador dejaría que la velocidad de su desplazamiento pasara por los puntos de ajuste hasta que se estableciera en un punto de ajuste cerca de donde normalmente terminaría el desplazamiento. Al configurar scroll-snap-stop, puede decirle al navegador que debe detenerse en un elemento en particular antes de permitir que el usuario lo pase.

Puede consultar más información --> scroll-snap-stop (css-tricks.com)

Puede usar Gsap ScrollTrigger estándar para lograr el resultado deseado en https://circleci.com .
Demostración en codesandbox

 import React, { useRef, useEffect, useState } from "react"; import "./styles.css"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; export default function App() { const ref = useRef(null); const [progress, setProgress] = useState(0); const [tween, setTween] = useState(null); useEffect(() => { if (tween) return; gsap.registerPlugin(ScrollTrigger); let scrollTween = gsap.to(ref.current, { ease: "none", backgroundColor: "#DAF7A6", scrollTrigger: { trigger: ref.current, pin: true, anticipatePin: 1, invalidateOnRefresh: true, refreshPriority: 1, start: "top 0%", end: "+=300%", markers: false, toggleActions: "play reset play reset", onUpdate: (self) => { let p = (self.progress * 100).toFixed(1); setProgress(p); } } }); setTween(scrollTween); }, []); return ( <div className="App"> <div className="top"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2>{" "} <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> <div ref={ref} id="hscroll"> <h1> When the scroll arrive this div, the position of this div will become sticky, and the percentage will start to increase from 0 to 100. When arriving 100%, user can then scroll to next section </h1> <h2 id="output">{`Percentage scrolled: ${progress}%.`}</h2> </div> <div className="bottom"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> </div> ); }