使用 css calc 解决滚动条的出现导致内容被挤压问题

当你在CSS中遇到滚动条导致的内容区域挤压问题时，可以利用`calc()`函数动态计算元素的总宽度，以便留出滚动条的空间。特别是对于那些使用百分比布局，并且需要兼容各种浏览器的场景。

例如，如果你想让一个元素的内容区在没有滚动条的情况下宽度为100%，但实际上给滚动条预留了空间，可以这样做：

.content {
  width: calc(100% - (2 * scrollbar-width)); /* 计算100%减去两倍滚动条宽度 */
  overflow-x: auto; /* 添加水平滚动条 */
}

这里的关键在于`scrollbar-width`，它是一个伪元素，用于获取滚动条的实际宽度。不同浏览器对这个的支持程度不同，一种常见的方式是使用JavaScript实现：

function getScrollbarWidth() {
  const outer = document.createElement('div');
  outer.style.visibility = 'hidden';
  outer.style.width = '100px';
  document.body.appendChild(outer);

  const inner = document.createElement('div');
  inner.style.overflow = 'scroll';
  inner.style.width = '100%';
  outer.appendChild(inner);

  const difference = outer.offsetWidth - inner.offsetWidth;
  document.body.removeChild(outer);
  return difference;
}

然后在CSS里引用这个JavaScript函数的结果：

.scroll-calculator {
  --scrollbar-width: /* 将JavaScript得到的值赋值给变量 */;
  width: calc(100% - (2 * var(--scrollbar-width)));
}

注意，这种方法并不适用于所有浏览器，尤其是老旧的、不支持`getComputedStyle()`或`window.innerWidth`的浏览器。如果需要更好的兼容性，建议使用第三方库或者考虑使用其他布局技术。