react - 到达特定部分时停止滚动

Question

当前用户界面：

当我想做的是，当滚动到达红色部分时，百分比会开始增加
在百分比增加到 100% 之前，用户无法继续向下滚动。

示例： https://circleci.com/#advantage-flexibility

怎么做？

App.js

import "./styles.css";
import { useScrollPercentage } from "react-scroll-percentage";

export default function App() {
  const [ref, percentage] = useScrollPercentage({
    /* Optional options */
    threshold: 0
  });
  return (
    <div className="App">
      <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 ref={ref} style={{ color: "red" }}>
        <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>{`Percentage scrolled: ${percentage.toPrecision(2)}%.`}</h2>
      </div>
      <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>
  );
}

Codesnadbox:
https://codesandbox.io/s/divine-bird-9fy50?file=/src/App.js:0-1365

Answer 1

您可以使用 CSS 来做到这一点！

scroll-snap-stop 是 CSS 滚动捕捉模块的一部分。滚动捕捉是指在滚动窗口（或可滚动容器）时将视口的位置“锁定”到页面上的特定元素。想象一个滚动捕捉容器，就像在一个元素顶部放置一块磁铁，该元素粘在视口顶部并强制页面在此处停止滚动。

scroll-snap-stop 允许您强制滚动捕捉容器捕捉到特定元素。假设你在一个滚动捕捉容器中滚动，你给它一个巨大的鼠标滚轮旋转。通常，浏览器会让您的滚动速度飞过捕捉点，直到它停留在接近滚动正常结束位置的捕捉点上。通过设置 scroll-snap-stop，您可以告诉浏览器它必须在允许用户通过之前停止在特定元素上。

您可以查看更多信息 --> scroll-snap-stop (css-tricks.com)

Answer 2

1. 在react-hooks 中使用useRef 为页面的滚动（包含所有文本的标签）写一个event.listener

2. 找到您刚刚创建的 ref 的 y 轴值，您希望停止滚动。

3. 拥有保存百分比的状态，以及用户现在所在的 y 轴状态。

4. 当百分比不是 100 并且达到当前参考的所需 y 轴值时，停止滚动您之前定义的参考。

5. 当百分比更改为 100 或用户向上滚动时（这意味着当前 y 轴小于停止点）允许再次滚动。

Answer 3

您可以使用标准 Gsap ScrollTrigger 在 https://circleci.com 上实现所需的结果。
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>
  );
}