Detect scrollbar dynamically

Question

What is wrong with the following code?

I need to detect and set width of 1 element based on if another element has scrollbar or not. this seems not working:

console.log("print Scroll..here...");
if(($(".printer-details-container").offsetHeight < $(".printer-details-container").scrollHeight) || ($(".printer-details-container").offsetWidth < $(".printer-details-container").scrollWidth)){
      // your element have overflow
      console.log("print Scroll..here...");
      $(".printer-header").css({"width":"96.9999%;"});
 }
 else{
      //your element don't have overflow
      console.log("no print Scroll..here...");
      $(".printer-header").css({"width":"100%;"});
      //console.log($(".printer-header").print-header.css({"width":"100%;"});
 }

Condition is not working and we don't see a width setting up! — Smitha, Nov 19 '15 at 13:36

score 1 · Answer 1 · answered Nov 19 '15 at 13:48

Have a look at this:

https://jsfiddle.net/4Lms5uzz/

At first the second div is set to 50 by 50.

If scroll is present in the #rules div, the dimensions of the second will be changed.

Basically the method is divWithScrollbar.clientHeight < divWithScrollbar.scrollHeight

scrollHeight gets the height of the content inside the div and clientHeight get the size of the div.

if the scrollHeight is smaller than scrollHeight, the scrollbar is visible.

Detect scrollbar dynamically

1 Answers1

Linked