Embedding unscrollable PDF pages

Help
3

This CSS snippet will do.

/* Hide alt text of PDF embed */
.internal-embed.pdf-embed::before {
    display: none;
}

/* ![[filename.pdf|fix]] will block pointer events */
.internal-embed.pdf-embed[alt="fix"] .pdf-container {
    pointer-events: none;
}

With this snippet enabled, any PDF embed of the form ![[...|fix]] will be unscrollable.

Options

  1. If you want to make all PDF embeds with #page=... unscrollable, replace [alt="fix"] with [src*="#page="].

  2. To hide the toolbar at the top, add this:

    .internal-embed.pdf-embed[alt="fix"] .pdf-toolbar {
    display: none;
}

  3. Also, you can change fix to any string you like. For example, if you like ![[filename.pdf|unscrollable]], use this instead:

    .internal-embed.pdf-embed::before {
    display: none;
}

.internal-embed.pdf-embed[alt="unscrollable"] .pdf-container {
    pointer-events: none;
}

  4. You can make ALL pdf embeds unscrollable by

    .internal-embed.pdf-embed .pdf-container {
    pointer-events: none;
}

Limitation

This approach blocks all pointer events, not just scrolling. So other actions like selecting text, right-clicking to get the link to the selection, … won’t work.
If someone knows a better solution, I would love to learn it so please let me know

Update 2024

My plugin PDF++ supports this as one of its options.

7 Likes