react-pdf 在 pdf 上更改页面导致页面全部向上滚动

Question

我正在使用 react-pdf (github link) 在我的 React 应用程序上显示 pdf。这是代码：

import { useColor } from '@/hooks';
import { ArrowLeftIcon, ArrowRightIcon } from '@chakra-ui/icons';
import { HStack, Spinner, Text, VStack } from '@chakra-ui/react';
import React, { useState } from 'react';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';

enum Direction {
  Left = '-',
  Right = '+',
}

function PdfComponent({ pdfLink }) {
  const { primary } = useColor();

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

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  const turnPage = (direction: Direction) => {
    if (direction === Direction.Left) {
      if (pageNumber === 1) return;
      setPageNumber(pageNumber - 1);
    }

    if (direction === Direction.Right) {
      if (pageNumber === numPages) return;
      setPageNumber(pageNumber + 1);
    }
  };

  return (
    <VStack>
      <Document file={pdfLink} onLoadSuccess={onDocumentLoadSuccess} loading={<Spinner />}>
        <Page pageNumber={pageNumber} />
      </Document>
      <HStack>
        <ArrowLeftIcon cursor="pointer" color={primary} onClick={() => turnPage(Direction.Left)} />
        <Text>
          Page {pageNumber} of {numPages}
        </Text>
        <ArrowRightIcon cursor="pointer" color={primary} onClick={() => turnPage(Direction.Right)} />
      </HStack>
    </VStack>
  );
}

export default PdfComponent;

一切正常，除了当我翻页时（如果从未看到该页）浏览器向上滚动 window，就像在重新加载期间一样，我必须向下滚动到再次查看整个pdf。一旦我翻完 pdf 的所有页面，这种行为就会停止，我可以轻松地更改页面并且 window 保持对 pdf 组件的关注。

我该如何解决这个问题？

Answer 1

当组件在页面上更改尺寸时，React 似乎会将视口滚动到顶部。解决办法是在容器Document的CSS class - .react-pdf__Document上设置height。 height 属性不应在 % 中，使用其他度量标准，如 px 或 vh，这应该有效 -

.react-pdf__Page.prevPage {
  position: absolute !important;
  z-index: 1;
}

.react-pdf__Document{
  height: 800px; // change height accordingly
}

react-pdf 在 pdf 上更改页面导致页面全部向上滚动

react-pdf changing page on a pdf cause the page to scroll all up

reactjs

react-pdf