CSS如何检测div滚动条出现，解决头部内容对齐偏移问题？

容器查询的使用问题 #

容器查询的语法本身是正确的，但SCSS不识别这些属性大概率是两个原因：

• 你的SCSS编译器版本太老，不支持CSS容器查询这个新特性（容器查询属于CSS容器查询模块的内容，需要较新的编译环境）
• 写法可能有疏漏：container-type需要设置在容器元素上（也就是头部的父级元素），才能让@container规则生效。

正确的SCSS写法示例：

// 给头部的父容器设置容器查询上下文
.header-wrapper {
  container-type: inline-size;
}

// 当容器宽度因滚动条出现而缩小时，给头部加右侧内边距
@container (inline-size < 原容器宽度值px) {
  .header {
    padding-right: 17px; // 滚动条默认宽度，可根据实际浏览器调整
  }
}

更简单的替代解决方案 #

其实不用容器查询也能快速解决错位问题，推荐几种实用方法：

方法1：自动计算滚动条宽度补内边距 #

给带滚动条的容器加一个动态计算的右侧内边距，自动适配滚动条宽度：

.scroll-box {
  overflow-y: auto;
  padding-right: calc(100vw - 100%);
}

不管滚动条是否出现，容器内的内容都不会偏移，和头部保持对齐。

方法2：用scrollbar-gutter预留滚动条空间（现代浏览器支持） #

这是CSS专门解决滚动条布局偏移的属性，设置后容器会提前预留滚动条的位置，滚动条出现时不会改变容器宽度：

.scroll-box {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

注意：该属性需要Chrome 94+、Firefox 91+、Edge 94+以上版本支持。

方法3：强制始终显示滚动条 #

如果产品允许，直接让滚动条一直显示，避免容器宽度变化：

.scroll-box {
  overflow-y: scroll;
}

缺点是内容未超出时也会显示滚动条，但能彻底解决错位问题。

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