reactjs - 如何获取当前滚动的元素键 - React PDF

Question

我需要在我的 ReactPDF 查看器上显示当前页面。

用户滚动页面时如何调用 setPageNumber？

  const [pageNumber, setPageNumber] = useState(1);

  let currentRef = useRef(null);

  <Document
      onLoadSuccess={({ numPages }) => setNumPages(numPages)}
      ...
  >
      {Array.from(new Array(numPages), (el, index) => (
        <Page
          key={`page_${index + 1}`}
          pageNumber={index + 1}
          inputRef={
            pageNumber === index + 1
              ? (ref) =>
                ref && ref.scrollIntoView()
              : null
          }
        />
      ))}
   </Document>

以前我有一个按钮设置当前页面，当设置组件滚动到这个页面时。

我也想根据当前滚动的页面来设置页面。

谢谢！

Answer 1

我会将 Page 包装在一个组件中，该组件利用 IntersectionObserver 来查找页面上当前可见的页面。

这就是我的做法：

https://codesandbox.io/s/react-pdf-intersection-observer-90gvy