Embedding unscrollable PDF pages

[tnyjstr]

Hello everyone,
I am having a hard time working with embedded single PDF pages.
I have a note with multiple PDF embeds of the same file, each showing a different page of the document through internal linking ( ![[(file).pdf#page=(number)] )

What I’m trying to do

But I find it very tedious that scrolling through the note occasionally also scrolls through the respective PDFs when the cursor is on top of it while scrolling. I would like to have the pages sit statically inside of the note, without being able to scroll it - or at least avoid the scrolling while the cursor is hovering over the embed.

Is there a way around this?

I have tried to search for fitting CSS snippets, but I was not able to find any.
There appears to be a solution in another tool by somehow limiting overflow. But I am not proficient in CSS at all which heavily limits my understanding of how this would be applicable for Obsidian.

Any help or pointer is greatly appreciated.

[cheezopath]

I would love this too, would be super useful for TTRPG books and other reference without having to screenshot and crop and manage more assets to have the same effect.

[ush]

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.

[tnyjstr]

Thank you! This works like a charm.
I also appreciate the in-depth instructions you provided!

[tnyjstr]

I have a little follow-up:

Are you aware of a method to fit the embedded page to a height that has been set in markdown?

I know there’s a (Fit Height) function for it via the toolbar - but since the toolbar is (thankfully) neither visible nor accessible now, I was wondering if there was a method to force this continually.

[cheezopath]

[[filename.pdf#page=1&height=600]] would start on page 1 and fix the height at 600.

later I’ll have a go at implementing the above solution and see if I can get non-scrolling and fixed height working together.

[tnyjstr]

That would be absolutely amazing.

[cheezopath]

turns out it really is as simple as:

[[filename.pdf#page=1&height=600|fix]]

to get a 600 pixel tall embed of pdf page 1 if you’re using ush’s handy snippet!