Plugin Scroll Bars

Photoshop UXP Plugin API
1

In the Manifest you set the Panel Min/max height values.
If the panel is made smaller by the user, is there a way to have it show scroll bars to indicate there is more of the panel available ?

2
3

Yes! How you do this is largely up to you, but my typical pattern is this:

.wrapper {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: auto; /* or scroll */
}

Then:

<div class="wrapper">
    <!-- all your plugin content -->
</div>
2 Likes
4

Anyway, be aware that scrollbars right now have z-index something like infinite and almost nothing can be above them.

5

Unfortunately it’s even impossible to hide them via overflow:hidden (trying to use a trick to hide them by putting them in a wrapper that is so small that the scrollbars will be outside) :confused:

6

Is there way to always show the scrollbar?

7

I think overflow: scroll to force show the scrollbar in your css should work.

Or if you want to show only the vertical/horizontal scrollbar:

overflow-y: scroll; /* Show vertical scrollbar */
overflow-x: scroll; /* Show horizontal scrollbar */
1 Like
8

“scroll” only shows the area of the scrollbar, but not the actual scrollbar itself. Like that is looks like uneven padding, which isn’t that nice to look at.

9

Photoshop’s scroll bars only ever reserve the space required; if no scrolling is required, it’s a blank (or maybe slightly differently shaded space).

For example:

image
image576Ă—954 21.7 KB

On macOS, this is irrespective of the OS-level setting to always show scrollbars.

If you don’t want the gap, you’ll need to use overflow: auto to let it determine when scrolling needs to happen, or accommodate for the gap in any designs.

1 Like
10

I’m asking because it was possible in CEP. And with “auto” there’s some annyoing shifting going on when the scrollbar comes and goes. Cheers for the info.

11

Is there a way to color the background of the scrollbar area? In my plugin it has the same color as the panel background, while in the standard panels (actions, layers, …) it is slightly darker than the rest.

12

You can assign a CSS class to your container and add an absolute positioned ::after-element that has the width and background of the scrollbar-track in Photoshop. The best way to keep this theme aware is to set the background color via a CSS-variable which you can then change depending on the theme.

13

Diddled around for probably 30-60 minutes on this before I found your simple solution. THANK YOU!

Using those settings, I notice the bottom arrow of the scrollbar is covered up. I had to set the bottom setting to 20px to avoid this, like so:

.wrapper {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 20px;
    overflow: auto; /* or scroll */
}

This, however, causes there to be basically 20px of extra spacing below the scrollbar. Is there any other way to solve this? It would help to tighten things up a little bit – which would help because, in Photoshop workspaces especially, screen space tends to be very limited.

1 Like