Question

页面包含pdf幻灯片。单击pdf页面时，将打开一个模态窗口，其中包含所有页面并在其上滚动。我需要根据用户单击的号码自动滚动到页面。

例如，如果用户单击第7页。在Modal上，滚动条将在此页面上。

我使用“反应滚动”。代码示例：

var gameLoopInterval = setInterval(function() {
    drawEverything();
    moveEverything();
  }, 1000/framesPerSecond);

// Later on, when the game is over
clearInterval(gameLoopInterval);

带有pdf页面并滚动的模式窗口的示例代码：

renderProject = () => {
    const {name, description, team, uploadPdf} = this.props.project;
    const {pageNumber, numPages} = this.state;
    return (
      <Fragment>
        <div className="section-project-extended">
          <div className="top-title">{name}</div>
          <div className="section-project-extended-wrapper">
            <div className="left-content-block">
              <div className="description">{htmlEncode(description)}</div>
              {uploadPdf && uploadPdf.secure_url ? (
                <div>
                  <div className="pdf-slide-nav">
                    {this.ArrowData.map((item, index) => (
                      <NavArrow {...item} key={index}/>
                    ))}
                    <a
                      className="full-width-btn"
                      href={uploadPdf.secure_url}
                      rel="noopener noreferrer"
                      target="_blank"
                    ><img src={fullWidthIcon} alt=""/></a>
                  </div>
                  <Document
                    file={uploadPdf.secure_url}
                    onLoadSuccess={this.onDocumentLoadSuccess}
                    loading={<LoadingMessage message="Loading pdf file.."/>}
                  >
                    <Link
                      offset={-100}
                      to={`#page-${pageNumber}`}
                      spy={true}
                      smooth={true}
                      duration={800}
                    >
                      <div className="zoom-pdf-page"
                           onClick={this.toggleZoomModal}>
                        <Page loading={<LoadingMessage message="Loading pdf page.."/>} renderAnnotationLayer={false}
                              renderTextLayer={false} pageNumber={pageNumber}/>
                      </div>
                    </Link>
                  </Document>
                  <div className="center-page-number">Page {pageNumber} of {numPages}</div>
                </div>
              ) : null}
            </div>
            {team.length ? <Team team={team}/> : null}
          </div>
        </div>
        {this.state.zoomModal ? (
          <ModalDocument closeBtn={this.imgZoomRemove}/>
        ) : null}
      </Fragment>
    );
  };

Answer 1

呈现PDF文档时，可以确保将其保留在内存DOM references of the pages you render中。然后，您可以使用Element.scrollIntoView()使用先前检索到的引用滚动到给定页面。

例如：

// In your constructor
this.refs = this.state.numPages.map(() => React.createRef())

// Later in your render function
{Array.apply(null, {length: this.state.numPages}).map((val, index) => {
  return index + 1;
}).map((pages, i) => (
  <div id={`page-${pages}`
    ref={this.refs[i]}
    key={i}>
    <Page
      loading={<LoadingMessage message="Loading pdf page.."/>}
      renderAnnotationLayer={false}
      renderTextLayer={false}
      pageNumber={pages}
      />
  </div>
))

// When you want to scroll to a specific page
this.refs[2].scrollIntoView(); // Scroll to page 3

ReactJS。自动滚动到pdf页面

1 个答案: