Window scrolls to top onClick

[hdehal]

I am using links for Previous/Next of PDF pages.

The functionality works great (pages go previous/next as expected). However, my viewport/window scrolls to the top anytime the onClick link is clicked. Would appreciate any advice on how to prevent the page window from scrolling. Thanks!

<a onClick={pageNumber <= 1 ? "event.stopPropagation()" : previousPage}>&larr; Previous</a>

references:

    function previousPage() {
        changePage(-1);
    }

    function nextPage() {
        changePage(1);
    }

Thanks in advance. One of my absolute favorite React projects!

[hdehal]

And a minute after posting this, I find that e.preventDefault() will prevent scrolling to the top, e.g.:

    function nextPage(e) {
        changePage(1);
        e.preventDefault()
    }

However I can still see my viewport/window vertical scrollbar flicker/flash. Not sure if that's fixable or an inherent browser problem.

[kubami]

The same thing happened to me.
But it only happened when I navigated to a page that hasn't been displayed before in this session.
When changing to a page that was already displayed it did not scroll to the top.

React will scroll viewport to the top when components change dimensions on the page.
The solution was to set width or height on the CSS class of the container Document. (not to be confused with the width or height of the Page)

[tbagdzius2]

I'm having the same issue - after switching the page (but only the 1st time navigation occurs). However, I need PDF to be responsive, so I am using the following CSS:
.react-pdf__Page__canvas { width: 100% !important; height: auto !important; }

Any ideas why is it happening only when switching to another page only the 1st time and how to solve this?

[hdehal]

@tbagdzius2 Might be helpful if you post up a live page example (assuming you tried what @kubami and I suggested worked for us).

[abitgen]

The issue is every time the page changes, the component re-renders from scratch, one solution as mentioned by @kubami is to set width and height, but according to me only height is enough as only the y axis is scrolling. height attribute should not be in %, use other metric like px or vh, this particular css should work

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

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[hdehal]

As a heads-up, a combination of CSS and the methods in these threads worked for me:
#418
#689

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

.react-pdf__Document{
  height: 80px;
}

Thanks!