为什么我不能在没有滚动条的情况下获得容器宽度？

Question

我有一个带有一些图像的容器（砖石网格）。我有一个函数来计算容器的宽度，另一个函数来计算每个图像的宽度。但是获取容器宽度的功能并不像预期的那样工作，因为宽度包含滚动条。因此，图像宽度的计算也是不正确的。

//Function to calculate the width of the container
 getContainerWidth() {
    const postContainer = document.getElementsByClassName(
      'container'
    );
    if (postContainer.length > 0) {
      let containerWidth = postContainer[0].clientWidth;
      containerWidth = `${containerWidth}px`;

      this.setState({
        containerWidth: containerWidth,
      });
    }
  }

我已经尝试了各种功能（offsetWidth，clientWidth，scrollWidth ...），但它们都不适用于我。我还尝试获取滚动条的宽度并从容器宽度中减去它。这很有用，但我需要一个适用于不同浏览器的解决方案。

如果浏览器宽度是例如1920px。容器宽度也是1920px，但它应该是1905px（1920 - 滚动条）。

Answer 1

获取ClientWidth

  

对于没有CSS或内联布局框的元素，Element.clientWidth属性为零，否则它是元素的内部宽度（以像素为单位）。它包括填充但不包括垂直滚动条（如果存在，如果呈现），边框或边距。

实施例

var width = element.clientWidth;