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

- CCCC

---

嘿@CCCC，请告诉我哪个解决方案可以用来授予他们赏金。 - Omar The Dev

Answer 1

你可以使用CSS来实现这个！

scroll-snap-stop是CSS滚动捕捉模块的一部分。滚动捕捉是指在窗口（或可滚动容器）滚动时，“锁定”视口位置到页面上特定元素。把一个具有滚动捕捉功能的容器想象成把磁铁放在元素上，它会粘附在视口的顶部，并强制页面停止滚动。

scroll-snap-stop允许您将滚动捕捉容器强制捕捉到特定元素。假设您正在滚动一个具有滚动捕捉功能的容器，并给它一个极大的鼠标滚轮旋转力度。通常情况下，浏览器会让您的滚动速度超过捕捉点，直到最终停留在靠近正常滚动结束的捕捉点。通过设置scroll-snap-stop，您可以告诉浏览器必须在允许用户穿过之前停留在特定元素上。

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

- Omar The Dev

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。-【来自审查】 - Tom

Answer 2

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

2. 找到刚刚创建的ref的y轴值，以便在需要停止滚动时使用。

3. 创建一个状态来保存百分比，以及当前用户的y轴状态。

4. 当百分比不为100且达到了当前ref的目标y轴值时，停止之前定义的ref的滚动。

5. 当百分比变为100或用户向上滚动（也就是当前y轴小于停止点），再次允许滚动。

- GiL Itzhaky

---

如果您想获得+100声望奖励，请在Codesandbox上展示结果。 - Omar The Dev

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

- the Hutt