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＆lt; = Z＆lt; = Y时，你需要计算（Y - X）的Z的百分比，因为Z将是顶部位置。

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

在react app中获取文档滚动百分比的最佳方法是什么？

1 个答案: