在反应中实现自定义无限滚动

Question

我试图实现无限滚动，但是当组件重新渲染时，滚动条会一直回到顶部，如下所示。如何将滚动条粘贴到用户滚动的位置？还是因为组件重新渲染？但是组件必须重新渲染，因为新记录是从 api 调用中添加的。

AppList.tsx

  //Initial values
  const [pageNumber, setPageNumber] = useState<number>(1);
  const [scrolling, setScrolling] = useState<boolean>(false);
  const [totalPages, setTotalPages] = useState<number>(3);

<div ref={divRef} className={AppList.Container} onScroll={() => {
        if (scrolling && totalPages! <= pageNumber!) {
          return;
        }
        else {
          const nodes = document.querySelectorAll('.ms-List-cell');
          const lastLi: Element = nodes[nodes.length - 1];
          const lastLiOffset = lastLi.getBoundingClientRect().top + lastLi.clientHeight;
          const pageOffset = window.pageYOffset + window.innerHeight;
          var bottomOffset = 150;
          if (pageOffset > lastLiOffset - bottomOffset) {
            setScrolling!(true);
            setPageNumber!(pageNumber! + 1);
            dispatch(GetAllAppDefinitions(dispatch, pageNumber! + 1));(Service call)
          }
        }
      }}>
        {updatedColumns.length > 0 && (
          <DetailsList
            className={appListTableStyle}
            columns={updatedColumns}
            selectionMode={SelectionMode.none}
            items={updatedItems || []}
          />
        )}
      </div>

Answer 1

这是一个使用 React Hooks 无限滚动的基本示例，您可以根据需要对其进行修改以发出 API 请求并将其推送到您的数据中，

import React, { useEffect, useState, useRef  } from 'react';

const divStyle = {
    color: 'blue',
    height: '250px',
    textAlign: 'center',
    padding: '5px 10px',
    background: '#eee',
    marginTop: '15px'
};


const containerStyle = {
    maxWidth: '1280px',
    margin: '0 auto',
}
const InfiniteScroll = () => {
    const [postList, setPostList] = useState({
        list: [1,2,3,4]
    }); 
    // tracking on which page we currently are
    const [page, setPage] = useState(1);
    // add loader refrence 
    const loader = useRef(null);

    useEffect(() => {
         var options = {
            root: null,
            rootMargin: "20px",
            threshold: 1.0
         };
        // initialize IntersectionObserver
        // and attaching to Load More div
         const observer = new IntersectionObserver(handleObserver, options);
         if (loader.current) {
            observer.observe(loader.current)
         }

    }, []);


    useEffect(() => {
        // here we simulate adding new posts to List
        const newList = postList.list.concat([1,1,1,1]);
        setPostList({
            list: newList
        })
    }, [page])

    // here we handle what happens when user scrolls to Load More div
   // in this case we just update page variable
    const handleObserver = (entities) => {
        const target = entities[0];
        if (target.isIntersecting) {   
            setPage((page) => page + 1)
        }
    }


    return (<div className="container" style={containerStyle}>
        <div className="post-list">
            {
                postList.list.map((post, index) => {
                    return (<div key={index} className="post" style={divStyle}>
                        <h2> {post } </h2>
                    </div>)
                })
            }
             <!-- Add Ref to Load More div -->
            <div className="loading" ref={loader}>
                    <h2>Load More</h2>
           </div>
        </div>
    </div>)
}

export default InfiniteScroll;

致谢 => https://dev.to/hunterjsbit/react-infinite-scroll-in-few-lines-588f

Answer 2

这就是我实现无限滚动的方式。如果您在内部元素而不是窗口上滚动，则 scrollElement 正在设置

import React from 'react';
import PropTypes from 'prop-types';

componentDidMount() {
  const {
    initialLoad,
    initialPage,
    loadMore,
    scrollElement
  } = this.props;
    (scrollElement || window).addEventListener('scroll', this.handleScroll);
    if (initialLoad) {
      loadMore(initialPage);
    }
  }

  componentWillUnmount() {
    const { scrollElement } = this.props;
    (scrollElement || window).removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    const {
      loadMore, threshold, hasMore, loading, page, scrollElement
    } = this.props;
    if (scrollElement) {
      const contentHeight = document.getElementById('scroller').clientHeight;
      const {  scrollTop } = scrollElement;
      const { y, height } = scrollElement.getBoundingClientRect();
      if (((height - y) + scrollTop) > contentHeight - threshold && hasMore && !loading) {
        loadMore(page);
      }
      return;
    }
    const { innerHeight, scrollY } = window;
    const contentHeight = document.getElementById('scroller').clientHeight;
    if (innerHeight + scrollY > contentHeight - threshold && hasMore && !loading) {
      loadMore(page);
    }
  };

  render() {
    const {
      loading, children, loader, className
    } = this.props;
    return (
      <div
        id="scroller"
        className={ className }
      >
        { children }
        { loading ? loader : null }
      </div>
    );
  }

}

Answer 3

你可以检查我的实现on this medium article你根本不需要使用onScroll！

我的猜测是，如果您将 bar 移到顶部，则可能您正在安装/卸载列出项目的组件。您需要做的只是逐步加载项目。如果列出项目的组件保持安装状态，则不应发生滚动:)