如何渲染滚动百分比的实际值？

Question

我有这段代码

import React from 'react'

const App = () => {  

function getScrollPercent() {
  var h = document.documentElement, 
    b = document.body,
    st = 'scrollTop',
    sh = 'scrollHeight';

  var scrollPercent = Math.round((h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100);
  //get the percentage of scroll

  return (isNaN(scrollPercent) ? '' : scrollPercent)
}

return (
  <p>{`${getScrollPercent()}%`}</p>
)

问题是当我滚动时，scrollPercent 不会实时刷新，而只会在滚动停止时刷新，所以 scrollPercent 可以从 0% 传递到 100% 并且不显示 0 到 100 之间的所有数字，所以问题是即使滚动，我如何修改我的代码以显示 scrollPercent 的实际值

Answer 1

您需要使用useEffect 来添加一个监听滚动事件的事件监听器。然后，您可以注册一个函数，该函数将在用户向上或向下滚动页面时重新计算滚动位置。

import React, { useEffect, useState } from "react";

function getScrollPercent() {
  var h = document.documentElement,
    b = document.body,
    st = "scrollTop",
    sh = "scrollHeight";

  var scrollPercent = Math.round(
    ((h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight)) * 100
  );
  //get the percentage of scroll

  return isNaN(scrollPercent) ? "" : scrollPercent;
}

const App = () => {
  // this represents the current calculated scroll percentage
  // maybe initialize this to something other than empty string
  const [scrollPercentage, setScrollPercentage] = useState("");

  useEffect(() => {
    function handleScroll() {
      const newScrollPercentage = getScrollPercent();

      // calculate and set the new scroll percentage
      setScrollPercentage(newScrollPercentage);
    }

    window.addEventListener("scroll", handleScroll, true);

    // clean up event listener when component unmounts
    return () => {
      window.removeEventListener('scroll', handleScroll, true);
    }
  }, []);

  // this contains extra styling to demo, so that you can see the 
  // scroll value change when scrolling, probably remove these style props
  return (
    <div style={{ height: "3000px" }}>
      <p style={{ position: "fixed" }}>{`${scrollPercentage}%`}</p>
    </div>
  );
};

export default App;

Codesandbox 示例链接：Codesandbox

Answer 2

你需要使用 window.addEventListener 来达到你想要的。

import React from "react";

const App = () => {
  const [scroll, setScroll] = React.useState("");

  function getScrollPercent() {
    var h = document.documentElement,
      b = document.body,
      st = "scrollTop",
      sh = "scrollHeight";

    var scrollPercent = Math.round(
      ((h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight)) * 100
    );

    setScroll(isNaN(scrollPercent) ? "" : scrollPercent);
  }

  React.useEffect(() => {
    window.addEventListener("scroll", getScrollPercent);

    return () => {
      window.removeEventListener("scroll", getScrollPercent);
    };
  }, []);

  return (
    <div style={{ height: "1000px" }}>
      <p style={{ position: "fixed" }}>{`${scroll}%`}</p>
    </div>
  );
};

export default App;

Codesanbox 链接：https://codesandbox.io/s/unruffled-field-3l3z8?file=/src/App.js:0-664