Browser scrolls to content preview on page load

[helmoski]

This occurs wherever the Content Preview UI element is used. There may be instances where this is the preferred behavior, but I think there are also cases where you wouldn't want the browser to automatically scroll to the embedded file.

Steps to Reproduce:

1. Visit the Content Preview Documentation
2. Wait a couple seconds
3. Notice how instead of starting at the top of the page, the browser scrolls to the content preview demo.

[helmoski]

The scroll appears to happen when viewerevent pagerender occurs. The following approach serves as a workaround:

const preview = new Box.Preview();
const originalScrollY = window.scrollY;
preview.addListener("viewerevent", (e) => {
  if (e.event === 'pagerender') {
      console.log("PAGE RENDER");
      window.scrollTo(0, originalScrollY);
  }
});
preview.show(FILE_ID, ACCESS_TOKEN, OPTIONS);

Example in Codepen: https://codepen.io/helmoski/pen/PoqRaJr

[helmoski]

The pagerender viewerevent appears to only occur for certain document types. For example, it occurs for PDFs, but not images. Thus, the above workaround won't work for all document types.

[helmoski]

After playing around with the events some more, it seems listening to the load event works better than viewerevent. You just have to add a setTimeout in the event handler.

i.e.

const preview = new Box.Preview();
preview.addListener("load", () => {
  const originalScrollY = window.scrollY;
  setTimeout(
    () => {
      window.scrollTo(0, originalScrollY);
    },
    1,
  );
});
preview.show(FILE_ID, ACCESS_TOKEN, OPTIONS);

Example in Codepen: https://codepen.io/helmoski/pen/LYVmgxz