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

Question

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

<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>

如何向 .headerdiv 添加一些填充(例如 addClass("pr-3"(，当且仅当 .maindiv 具有可见的垂直滚动条时(由于那里的内容量。

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

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

有什么想法吗？

Answer 1

您需要将.header和.main类包装到另一个元素中。然后只需检查这些包装器中的每一个，它们的腐蚀main元素是否有滚动条——就像你对scrollHeight > height()建议的那样——如果是这样，请将您的类添加到包装器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>