页面出现莫名其妙的滚动条

场景

这种情况多半是出现在使用了vh或者vw这种单位的情况。

原因

假如我搞了一个上下布局，上面导航栏，下面内容区域。

比如导航栏固定高度60px。

内容区域使用下面的计算高度。

css 复制代码

height: calc(100vh - 60px);

由于产生了横向滚动条，元素的实际高度发生变化。

在edge上，打开开发者工具，鼠标悬停在calc上，可以看到100vh对应924px。

如果在页面上选取元素，会发现滚动条不包含在元素区域。

js 复制代码

$0.offsetHeight
// 输出 909
$0.scrollHeight
// 输出 921

这个差异就是因为滚动条。

100vh包含滚动条，100%不包含滚动条。

类似于scrollHeight和offsetHeight的区别

解决

使用100%

这种方法使用场景比较少，大家都不是傻子，既然能用100%为什么还用vh呢？

vh的场景一般是，外部容器没有限定大小，比如没有设置高度100%，或者只设置了min-height: 100%，这会导致内部的height百分比无效。

如果是min-height的问题，可以通过下面的方法解决。
juejin.cn/post/740913...

使用js自定义css变量计算正确的vh

js 复制代码

function setViewportHeight() {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

// 初始化
setViewportHeight();

// 响应窗口大小变化（包括旋转、展开开发者工具等）
window.addEventListener('resize', setViewportHeight);

下面是加了防抖的写法

js 复制代码

function debounce(func, wait) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

function setViewportHeight() {
  let vh = document.body.offsetHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

// 初始化
setViewportHeight();

// 使用防抖包装 resize 回调，例如延迟 100ms
const debouncedSetViewportHeight = debounce(setViewportHeight, 100);

window.addEventListener('resize', debouncedSetViewportHeight);

css 复制代码

.my-element {
  height: calc(var(--vh, 1vh) * 100 - 60px);
}