动态检测滚动条 [英] Detect scrollbar dynamically

问题描述

以下代码有什么问题？

我需要根据另一个元素是否有滚动条来检测和设置1个元素的宽度。这似乎不工作：

  console.log（print Scroll..here ...）; （$（。printer-details-container）。offsetHeight< $（。printer-details-container）。scrollHeight）||（$（。printer-details-container）） .offsetWidth< $（。printer-details-container）。scrollWidth））{
 //你的元素溢出了
 console.log（print Scroll..here ...）; 
 $（。printer-header）。css（{width：96.9999％;}）; 
} 
 else {
 //你的元素没有溢出
 console.log（no print Scroll..here ...）; 
 $（。printer-header）。css（{width：100％;}）; 
 //console.log($(\".printer-header\").print-header.css({\"width\":\"100%;}）; 
} 
  

解决方案

请看看这个：

https://jsfiddle.net/4Lms5uzz/

首先，第二个div被设置为50到50。

如果#rules div中出现滚动，则第二个div的大小将会改变。

基本上这个方法是 divWithScrollbar.clientHeight< divWithScrollbar.scrollHeight

scrollHeight获取div内容的高度，clientHeight获取div的大小。

如果scrollHeight小于scrollHeight，则滚动条是可见的。

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

解决方案

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.

这篇关于动态检测滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！