Angular组件中scrollWidth与offsetWidth值相同问题排查

嘿，这个问题我之前也碰到过，主要是两个关键点没处理好，咱们一步步来解决：

1. 先让子元素真正产生横向溢出 #

Flex容器的子元素默认带有flex-shrink: 1属性——哪怕你给子元素设了固定宽高，它还是会被自动压缩来适配容器宽度，这样就不会产生真正的溢出，scrollWidth自然就和offsetWidth一模一样了。

所以第一步要给子元素加上flex-shrink: 0，强制它们保持你设置的固定宽度：

.container {
  display: flex;
  overflow: hidden;
  /* 给容器设个明确宽度，比如width: 400px; 方便测试 */
}

.container article {
  width: 250px; /* 你的固定宽度 */
  height: 120px; /* 你的固定高度 */
  flex-shrink: 0; /* 核心：禁止压缩 */
  margin: 0 15px; /* 边距会被算入scrollWidth */
  border: 2px solid #ccc; /* 边框也会包含在scrollWidth里 */
}

2. 确保正确获取DOM元素&在合适时机读取属性 #

你代码里的public container看起来没正确关联到DOM元素，而且如果在组件初始化太早的时机（比如ngOnInit）读取宽高，DOM可能还没完全渲染、样式还没生效，数值肯定不准。

修正组件代码：
首先在模板里给容器加个模板引用变量：

<div class="container" #container>
  <article>Content...</article>
  <article>More content...</article>
</div>

然后在组件类里用@ViewChild获取元素，并且在ngAfterViewInit钩子（视图完全渲染后）读取宽高：

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  @ViewChild('container') container!: ElementRef<HTMLElement>;

  ngAfterViewInit(): void {
    const containerEl = this.container.nativeElement;
    console.log('容器视口显示宽度:', containerEl.offsetWidth);
    console.log('包含溢出内容的完整宽度:', containerEl.scrollWidth);
  }
}

为什么之前数值相同？ #

• 没有给子元素加flex-shrink:0，导致子元素被压缩，没有真正溢出容器；
• 获取元素的时机太早，DOM还没完成渲染，样式未生效；
• 没有正确关联到目标DOM元素，读取的不是你想要的容器的属性。

按照上面的步骤调整后，你就能得到正确的offsetWidth（容器显示的宽度）和scrollWidth（包含所有溢出内容、边距、边框的总宽度）了。

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