如果（垂直）滚动条在另一个 div 中可见，则向 div 添加填充

Question

伙计们，我有以下 HTML 和 Bootstrap 类。

<div class="header">some stuff aligned to main</div>
<div class="main overflow-y-auto">some tabular stuff
  <div class="record">data goes here</div>
  <div class="record">data goes here</div>
  <div class="record">data goes here</div>
</div>

当且仅当.main div 的垂直滚动条可见（由于到那里的内容量。

我明白了，我可以通过比较element.scrollHeight > element.clientHeight来确定滚动条在元素上是否可见。我想我的问题是，如何在事件处理程序中 link 检查滚动条何时可见以及何时再次消失。显然，.main div 不是静态的，甚至不是静态字段，而是由许多s (".record") 动态组成的。这些由一些 $(.main).append($record.clone()); 语句添加并由 mySQL 数据填充。

我为什么要这样做？ .header 包含 .main div 中字段的标签。当数据多于 space 时，会自动添加滚动条，并根据需要重新设置字段宽度的格式。结果是 .header div 中的标签不再与下面的字段完全对齐。

有什么想法吗？

Answer 1

您需要将 .header 和 .main class 包装到另一个元素中。然后检查每个包装器，如果它们对应的 main 元素有一个滚动条 - 就像你用 scrollHeight > height() 建议的那样 - 如果是这样，将你的 class 添加到包装器 header元素：

$('.some-wrapper-class').each(function() {
 let $header = $(this).find('.header');
  let $content = $(this).find('.main');
  console.log($content[0].scrollHeight > $content.height()) ;
  if($content[0].scrollHeight > $content.height()) {
    $header.addClass('text-danger');
  }
});

.header {
  font-size: 2em;
  font-weight: bold;
}

.header-padded {
  color: red;
}

.main {
  height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<div class="some-wrapper-class">
  <div class="header">Header with scrollbar</div>
  <div class="main overflow-auto">
    some tabular stuff
    <div class="record">data goes here</div>
    <div class="record">data goes here</div>
    <div class="record">data goes here</div>
  </div>
</div>

<div class="some-wrapper-class">
  <div class="header">Header without scrollbar</div>
  <div class="main overflow-auto">
    some tabular stuff
  </div>
</div>

如果（垂直）滚动条在另一个 div 中可见，则向 div 添加填充

Add padding to div, if (vertical) scrollbar is visible in another div

jquery

scrollbar

event-handling

twitter-bootstrap