如何在div出现滚动条时自动添加类？

要实现无需用户操作、自动为动态内容的div添加/移除滚动条类的功能，核心是检测元素内容高度是否超出可视高度，并监听内容和容器尺寸的变化来实时更新类状态。

核心判断逻辑 #

判断垂直滚动条是否存在：当元素的scrollHeight（内容总高度，包含超出可视区域的部分）大于clientHeight（元素可视高度）时，说明内容溢出，存在滚动条。同理，水平滚动条可通过scrollWidth > clientWidth判断。

完整实现代码 #

HTML

<div class="list-container" id="dynamicList">
  <!-- 动态生成的列表内容将插入此处 -->
</div>

CSS

.list-container {
  width: 300px;
  height: 200px;
  overflow-y: auto; /* 内容超出时自动显示垂直滚动条 */
  border: 1px solid #eee;
}

/* 自定义滚动条存在时的样式 */
.has-scrollbar {
  border-color: #2196F3;
  box-shadow: 0 0 4px rgba(33, 150, 243, 0.3);
}

JavaScript

const listContainer = document.getElementById('dynamicList');

// 检测滚动条状态并切换类
function updateScrollbarClass() {
  const hasVerticalScroll = listContainer.scrollHeight > listContainer.clientHeight;
  listContainer.classList.toggle('has-scrollbar', hasVerticalScroll);
}

// 页面初始化时执行一次检测
updateScrollbarClass();

// 监听容器内容的动态变化（子节点增删、文本修改等）
const observer = new MutationObserver(updateScrollbarClass);
observer.observe(listContainer, {
  childList: true,
  subtree: true,
  characterData: true
});

// 监听窗口大小变化，避免容器尺寸改变导致滚动条状态变化
window.addEventListener('resize', updateScrollbarClass);

关键说明 #

• MutationObserver：这是监听DOM内容动态变化的原生API，无需依赖用户操作，只要容器内的内容（包括子元素、文本）发生变化，就会触发检测，完美适配动态列表场景。
• 实时性：页面加载、内容变化、窗口 resize 三个场景都会触发检测，确保类状态始终和滚动条状态一致。
• 简洁性：使用classList.toggle的第二个参数，可以直接根据布尔值自动添加或移除类，无需手动写if-else判断。

内容的提问来源于stack exchange，提问作者genzen