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

回答1:

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.

来源：https://stackoverflow.com/questions/33805052/detect-scrollbar-dynamically