如何实现div无滚动条时显示边框？（max height 350px）

嘿，这两个需求我刚好有实操经验，给你拆解一下具体的实现方案，分情况来看：

因为CSS没有原生的「检测元素是否溢出」选择器，所以得靠JavaScript来判断元素是否需要滚动条，再动态控制边框的显示状态。

具体实现步骤 #

1. 先写基础CSS样式，默认隐藏边框（也可以反过来，默认显示，有滚动条时隐藏）：

.scroll-container {
  max-height: 350px;
  overflow-y: auto;
  /* 默认隐藏边框，无滚动条时再添加 */
  border: none;
  transition: border 0.2s; /* 可选，加个过渡动画更丝滑 */
}

/* 定义带边框的样式类 */
.scroll-container.has-border {
  border: 2px solid #ccc;
}

2. 用JavaScript检测滚动条状态并切换类：

function toggleBorderForScroll(element) {
  // 判断是否有滚动条：scrollHeight是内容总高度，clientHeight是元素可视高度
  const hasScrollbar = element.scrollHeight > element.clientHeight;
  // 没有滚动条时添加边框类，有则移除
  element.classList.toggle('has-border', !hasScrollbar);
}

// 获取目标div
const targetContainer = document.querySelector('.scroll-container');

// 页面加载时先执行一次检测
toggleBorderForScroll(targetContainer);

// 如果div内容会动态变化（比如加载数据、用户输入），用MutationObserver监听内容变化
const observer = new MutationObserver(() => {
  toggleBorderForScroll(targetContainer);
});

// 监听子元素变化、文本内容变化等
observer.observe(targetContainer, { childList: true, subtree: true, characterData: true });

这里有两种方案，优先推荐CSS容器查询（现代浏览器支持），兼容旧浏览器的话用JavaScript方案。

方案一：CSS容器查询（无需JS，推荐） #

现在主流浏览器已经支持容器查询，可以直接针对元素自身的尺寸设置样式：

.height-container {
  container-type: size; /* 声明这是一个可检测尺寸的容器 */
  max-height: 350px;
  overflow-y: auto;
  border: none;
  transition: border 0.2s;
}

/* 当容器高度超过400px时（这里的400px是你设定的阈值），显示边框 */
@container (height > 400px) {
  .height-container {
    border: 2px solid #ccc;
  }
}

注意：container-type: size需要浏览器支持，目前Chrome、Firefox、Edge都已支持，Safari 16.4+也支持了。

方案二：JavaScript方案（兼容所有浏览器） #

如果要兼容不支持容器查询的旧浏览器，就用JS监听元素高度变化：

.height-container {
  max-height: 350px;
  overflow-y: auto;
  border: none;
  transition: border 0.2s;
}

.height-container.has-border {
  border: 2px solid #ccc;
}

function toggleBorderForHeight(element, threshold) {
  // 获取元素实际高度：offsetHeight包含边框和内边距，clientHeight是可视高度，按需选择
  const currentHeight = element.offsetHeight;
  // 高度超过阈值时添加边框类
  element.classList.toggle('has-border', currentHeight > threshold);
}

const targetContainer = document.querySelector('.height-container');
const heightThreshold = 400; // 替换成你需要的高度阈值

// 页面加载时检测一次
toggleBorderForHeight(targetContainer, heightThreshold);

// 如果div高度受窗口大小影响，监听窗口resize事件
window.addEventListener('resize', () => {
  toggleBorderForHeight(targetContainer, heightThreshold);
});

// 内容动态变化时，同样用MutationObserver监听
const observer = new MutationObserver(() => {
  toggleBorderForHeight(targetContainer, heightThreshold);
});

observer.observe(targetContainer, { childList: true, subtree: true, characterData: true });

如果需要同时实现两个需求，只需要把两个判断逻辑合并到同一个函数里就可以啦～

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