Customize zoomOverlay

Want to move Fit to width, Fit to page from zoomOverlay to separated buttons on toolbal. But can’t found the way to access zoomOverlay controls (to remove 2 items and divider).

Hello alex.anisov,

You could create a custom button using:

And call the relevant APIs


Best regards,
Tyler Gordon

I saw that, and it’s mostly clear. Problem is how to remove that 2 items and divider from existing zoomOverlay.


You can remove them with:

document.querySelectorAll('[data-element="zoomOverlay"] > [aria-label="Fit to width"]')[0].remove();
document.querySelectorAll('[data-element="zoomOverlay"] > [aria-label="Fit to page"]')[0].remove();
document.querySelectorAll('[data-element="zoomOverlay"] > [class="divider"]')[0].remove()

We are looking into having better UI customization APIs as well.

Best regards,
Tyler Gordon

1 Like

Will try this, thank you

Seems document.querySelectorAll('[data-element=“zoomOverlay”]) not in DOM if zoom menu not opened.

Hello alex.anisov,

I was able to get the node when it was closed:

This was tested on our samples page: JavaScript PDF Viewer Demo

What version are you on?

Best regards,
Tyler Gordon

You able to get it because select inner iframe - webviewer-1. So, to use it from JS on outer page, it should be smth like