How to determine if "auto" x & y scroll bars are displayed

[dscorca]

I have a 1000px by 95px html container and have the 'overflow x' and 'overflow y' properties set to 'auto'.

What I need to do is, if the html contents have caused the scroll bars to display, then I want to show a button so the user can expand the html container's contents to a larger display. I cannot find any way to determine if the overflow x or y has triggered the scroll bars.

Any thoughts?

[Alex]

You can use the following JavaScript code to determine if the scroll bars are displayed:

Code: Select all

var htmlContainer = document.getElementById("htmlContainerId");
var hasVerticalScrollbar = htmlContainer.scrollHeight > htmlContainer.clientHeight;
var hasHorizontalScrollbar = htmlContainer.scrollWidth > htmlContainer.clientWidth;

[dscorca]

Thank you so much Alex, that's exactly what I was looking for.

I added the follow to the record format's 'onload' event and now the buttons appear only when their respective html containers (SCNOTE0501 and SCNOTE0502) exceed the initial box size.


var html0501 = document.getElementById("SCNOTE0501");
var html0502 = document.getElementById("SCNOTE0502");

var hasVerticalScrollbar = html0501.scrollHeight > html0501.clientHeight;
if (hasVerticalScrollbar) {
applyProperty("btn0501","visibility","visible");
} else {
applyProperty("btn0501","visibility","hidden");
}

var hasVerticalScrollbar = html0508.scrollHeight > html0508.clientHeight;
if (hasVerticalScrollbar) {
applyProperty("btn0502","visibility","visible");
} else {
applyProperty("btn0502","visibility","hidden");
}

[Alex]

Great! Glad I could help.