stephanrauh / ngx-extended-pdf-viewer

A full-blown PDF viewer for Angular 16, 17, and beyond
https://pdfviewer.net
Apache License 2.0
484 stars 184 forks source link

margin top after scrolling #836

Closed adam-abdulaev closed 2 years ago

adam-abdulaev commented 3 years ago

I want to add a top margin after scrolling through anchor links. So that the pdf page does not fit tightly to the header after scrolling. I tried to do it via css using the usual tricks (border and negative margin, etc.), but it didn't work. The PDFs themselves have border around the page with a transparent border. I want to make it scroll to this border, or maybe some css trick can be applied. Any ideas how to do this? Thank you!

image In the screenshot, I showed how I would like the document to scroll, that is, leaving such an indent on top.

stephanrauh commented 3 years ago

There's already a CSS margin. You can scroll up manually. I'm afraid you need a tiny JavaScript hack. I'm also afraid this hack has to be implemented deep, deep in the core pdf.js library. The good news: I believe it's possible, and it's not even difficult.

stephanrauh commented 2 years ago

This approach works:

<ngx-extended-pdf-viewer
  [src]="'./assets/pdfs/The Public Domain - Enclosing the Commons of the Mind.pdf'"        
  (pdfLoaded)="patchScrolling()"
></ngx-extended-pdf-viewer>
  public patchScrolling(): void {
    if (!SimpleComponent.patched) {
      SimpleComponent.patched = true;
      const PDFViewerApplication: IPDFViewerApplication = (window as any).PDFViewerApplication;
      const previousImpl = (PDFViewerApplication.pdfViewer as any)._scrollIntoView;
      (PDFViewerApplication.pdfViewer as any)._scrollIntoView = (target: { pageDiv: HTMLDivElement, pageSpot?: any, pageNumber?: Number }) => {
        previousImpl.call(PDFViewerApplication.pdfViewer, target);
        if (target.pageDiv && (!target.pageNumber) && (!target.pageSpot)) {
          const parent = target.pageDiv.offsetParent;
          if (parent) {
            parent.scrollTop -= 10;
          }
        }
      }
    }
  }