当div高度超过设定视口高度(vh)时，如何切换CSS样式？

我明白你的需求啦——之前用JS实现过类似的滚动样式切换，但现在想把判断阈值从固定像素改成基于视口高度（vh）的动态值，当#vs的内容高度超过设定的vh值时，自动加上.vscroll类来启用滚动效果。

下面是调整后的完整实现方案，兼顾初始加载和窗口大小变化的场景：

第一步：CSS 样式准备 #

先把基础样式和滚动类的样式写好，这里我假设.vscroll要添加滚动相关的样式（比如固定最大高度、显示滚动条）：

#vs {
  clear: both;
  width: 90%;
  margin: 0 auto 0;
  overflow: hidden;
  position: relative;
}

.vscroll {
  overflow-y: auto;
  max-height: 90vh; /* 这里的vh值和后面JS的判断阈值对应 */
  /* 可以再加自定义滚动条样式，比如： */
  /* scrollbar-width: thin; */
}

第二步：JavaScript 逻辑调整 #

核心是把vh转换成实际像素值，然后对比元素的内容高度，同时处理窗口 resize 的情况：

// 获取目标元素
const vsElement = document.getElementById('vs');

// 封装判断逻辑为函数，方便复用
function toggleScrollClass() {
  // 设定你需要的vh阈值，比如90vh就乘以0.9，100vh就乘以1
  const vhThreshold = 0.9;
  // 把vh转换成实际像素：视口高度 * 阈值比例
  const pixelThreshold = window.innerHeight * vhThreshold;
  // 获取元素的完整内容高度（包括溢出的部分）
  const elementContentHeight = vsElement.scrollHeight;

  // 对比高度，切换类
  if (elementContentHeight > pixelThreshold) {
    vsElement.classList.add('vscroll');
  } else {
    vsElement.classList.remove('vscroll');
  }
}

// 页面加载完成后执行一次初始判断
window.addEventListener('load', toggleScrollClass);
// 窗口大小改变时重新判断，适配视口变化
window.addEventListener('resize', toggleScrollClass);

一些小提示 #

• 如果你需要调整阈值，只需要修改vhThreshold的数值即可，比如要80vh就改成0.8
• 使用scrollHeight而不是offsetHeight是因为它会包含元素内所有的内容高度（包括溢出的部分），判断更准确
• 监听resize事件是为了在用户调整窗口大小时，重新计算视口高度和判断逻辑，保证样式始终正确

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