CODEWITHSUNDEEP
javascriptjqueryhtmlcssscrollbar
Smitha
Smitha

Reputation: 6134

Detect scrollbar dynamically

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%;"});
 }

Upvotes: 0

Views: 328

Answers (1)

Ionut Milas
Ionut Milas

Reputation: 328

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.

Upvotes: 1

Related Questions