在React应用程序中获取文档滚动百分比的最佳方法是什么？

Question

我想知道用户何时接近文档底部，以便我可以从 API 获取下一页数据。

我目前有这个片段，我用它来获取滚动位置和总文档高度，但有些东西关闭了，因为当用户位于页面底部时，它显示了 88% 向下滚动的页面。

addScrollListener(){
    window.addEventListener('scroll', debounce(() => {// lodash debounce method.
        let supportPageOffset = window.pageXOffset !== undefined;
        let isCSS1Compat = ((document.compatMode || '') === 'CSS1Compat');
        let scroll = {
           x: supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft,
           y: supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop
        };

        console.log('scroll.y', scroll.y)
        console.log('offsetHeight', document.documentElement.offsetHeight)

        let scrollPercentage = (scroll.y / document.documentElement.offsetHeight) * 100

        console.log('scrollPercentage', scrollPercentage)

        if(scrollPercentage > 88){ 
           this.props.fetchData(`https://www.reddit.com/r/funny/${this.state.filter}.json?after=${this.props.after}`, this.props.posts)
        }
        }, 300));//ms
  }

当用户位于页面底部时，console.log 值如下：

scroll.y 5222
offsetHeight 5921
scrollPercentage 88.1945617294376

知道是什么导致了这种差异吗？

或者有没有更好的方法来检测反应中的滚动百分比？

也许有更好的方法来触发获取下一页调用，而不是使用滚动百分比？

提前致谢。

编辑：

工作解决方案 -

addScrollListener(){
    window.addEventListener('scroll', debounce(() => {// lodash debounce method.
        let supportPageOffset = window.pageXOffset !== undefined;
        let isCSS1Compat = ((document.compatMode || '') === 'CSS1Compat');
        let scroll = {
           x: supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft,
           y: supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop
        };

        let scrollPercentage = (scroll.y / (document.documentElement.offsetHeight - window.innerHeight)) * 100

        if(scrollPercentage > 90){ 
           this.props.fetchData(`https://www.reddit.com/r/funny/${this.state.filter}.json?after=${this.props.after}`, this.props.posts)
        }
        }, 300));//ms
  }

Answer 1

假设您有一个高度为 X 的屏幕和一个高度为 Y 的文档，Y >= X。

在这种情况下，在位置 0 处，屏幕的底部位置是 X，当您滚动到文档中的最底部位置时，屏幕中看到的底部位置是 Y，滚动位置的顶部是 Y - X .

所以，当你计算百分比时，当你说，在位置 0 <= Z <= Y, you will need to calculate the percentage of Z of (Y - X), since Z will be the top position.

因此，您不需要计算滚动位置相对于文档大小的百分比值，而是需要计算其相对于文档大小和屏幕大小之间的差异的百分比。

Answer 2

const [scrollPercentage, setScrollPercentage] = useState(0);

  const handleScroll = () => {
    const windowHeight = window.innerHeight;
    const fullHeight = document.documentElement.scrollHeight;
    const currentPosition = window.scrollY;

    const scrollPercentage = (currentPosition / (fullHeight - windowHeight)) * 100;

    setScrollPercentage(scrollPercentage);
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);