如何让文档流忽略CSS scale属性，避免触发滚动条？

问题原因 #

scale 属于CSS transform属性，仅改变元素的视觉呈现，不会修改它在文档流中的布局尺寸。但缩放后的元素视觉范围会超出原布局空间，当超出视口时就会触发水平滚动条。

解决方案 #

方案一：全局裁剪水平溢出

给<body>添加overflow-x: hidden，直接隐藏页面水平方向的溢出内容，避免滚动条出现：

body
{
  font: 10svw sans-serif;
  text-align: center;
  overflow-x: hidden; /* 新增：裁剪水平溢出 */
}

#zoom
{
  color: gray;
  scale: 3;
}

方案二：给缩放元素单独套容器（推荐）

如果不想全局隐藏水平溢出，可给目标元素套一个容器，容器尺寸与元素未缩放时一致，并开启overflow: hidden：

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <p>
      This is a test line.
    </p>
    <div class="zoom-container">
      <p id="zoom">
        This is a zooming test line.
      </p>
    </div>
    <p>
      This is a test line.
    </p>
  </body>
</html>

body
{
  font: 10svw sans-serif;
  text-align: center;
}

.zoom-container {
  overflow: hidden;
  width: 100%; /* 匹配p标签默认宽度 */
}

#zoom
{
  color: gray;
  scale: 3;
  transform-origin: center; /* 确保缩放中心在元素中间，避免偏移 */
}

实现飞入动画 #

如果要完成从scale:10到scale:1的飞入动画，可添加CSS关键帧动画：

@keyframes zoomIn {
  from {
    scale: 10;
    opacity: 0; /* 可选：添加淡入效果 */
  }
  to {
    scale: 1;
    opacity: 1;
  }
}

#zoom {
  color: gray;
  animation: zoomIn 0.5s ease-out forwards;
  transform-origin: center;
}

配合上述任一方案，即可实现动画且不触发滚动条。

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