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

Question

当前用户界面:

当我想做的是，当滚动到达红色部分时，百分比将开始增加

在百分比增加到 100% 之前，用户无法继续向下滚动。

例子:
https://circleci.com/#advantage-flexibility
怎么做？
应用程序.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>
  );
}

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

Answer 1

你可以使用 CSS 来做到这一点!
scroll-snap-stop 是 CSS 滚动捕捉模块的一部分。滚动捕捉是指在滚动窗口(或可滚动容器)时将视口(viewport)的位置“锁定”到页面上的特定元素。想象一个滚动捕捉容器，就像在一个元素顶部放置一 block 磁铁，该元素粘在视口(viewport)顶部并迫使页面在此处停止滚动。
scroll-snap-stop 允许您强制滚动捕捉容器捕捉到特定元素。假设你在一个滚动捕捉容器中滚动，你给它一个巨大的鼠标滚轮旋转。通常，浏览器会让你的滚动速度飞过捕捉点，直到它停留在接近滚动正常结束位置的捕捉点上。通过设置 scroll-snap-stop，您可以告诉浏览器它必须在允许用户通过之前停止在特定元素上。
您可以查看更多信息--> scroll-snap-stop (css-tricks.com)