Nable to get the height and width of the panel

Photoshop
1

This is my code, it doesn’t work because it can’t get the panel height

var panel = document.getElementById("panel");
panel.style.height = window.innerHeight + "px";
2

I want to monitor the scrollbar when the panel size changes

window.addEventListener("resize", function (e) {
    var panel = document.getElementById("panel");
    panel.style.height = window.innerHeight + "px";
}
3

You could try to listen for the resize event on your outer container, instead of on the window.
In theory, the resize event should fire for each element once it’s rendered by UXP, as Kerri explained here

4

Maybe have a read here :
http://forums.creativeclouddeveloper.com/t/plugin-scroll-bars/2186/2

A couple of lines in CSS and HTML and you should be good to go.

5

I’ve tried that method, but it will make the scroll bar display all the time. This is not what I want. I want the panel to have no scroll bar at the beginning, but when the panel size becomes smaller, the scroll bar will be generated due to content overflow. So for me, the biggest problem is that I can’t get the height of the panel. Do you know how to get the height of the panel?

6

You have to adjust some parameters in your manifest. Scrollbar will show only if the panel height get smaller than what you set in the manifest.

7

Thank you very much.

It really works because I added padding attribute to make the scroll bar always show. When the padding attribute is removed, it hides the scroll bar. That’s exactly what I need.

body {

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  // padding: 12px;

  color: #fff;

  width: 100%;

  height:100%;

  overflow-y: scroll;

}
8

I’m a bit confused, don’t you just need to set

height: 100%
overflow-y:auto

on the parent container? You don’t need to read out any height information, overflow auto automatically hides or shows the scroll bar based on the available space:

If content fits inside the padding box, it looks the same as visible , but still establishes a new block formatting context. Desktop browsers provide scrollbars if content overflows.

But maybe I didn’t understand your use case correctly.

9

Your code is correct. Before, I added padding attribute to make an error. Now I have fixed it.