HTML页面缩放时自动滚动的原因及解决方法

现象原因 #

1. 滚动容器层级错误：浏览器默认的滚动容器是<html>元素，而非<body>。仅给<body>设置overflow:hidden，无法阻止<html>触发的滚动行为。
2. vh单位的局限性：100vh基于视口可见高度计算，但缩放时浏览器的垂直滚动条会显示/隐藏，占用视口空间，导致元素实际高度与视口高度不匹配，触发自动滚动。
3. 浏览器自动滚动机制：部分浏览器在缩放时会自动调整滚动位置，确保当前可视区域内容保持可见，若页面元素高度处于临界值，就会出现不必要的上下滚动。

解决方法 #

方案1：同时锁定html和body的滚动 #

直接禁用整个页面的滚动能力，需要同时给<html>和<body>设置样式：

html, body {
    overflow: hidden;
    height: 100%;
}

添加height:100%是为了让元素高度严格匹配视口，避免vh计算带来的偏差。

方案2：使用dvh替代vh（推荐） #

dvh（动态视口高度）是CSS新增的单位，会自动排除滚动条占用的空间，精准匹配视口可用高度，从根源解决缩放时的高度计算问题：

header{
    height: 100dvh;
    background-color: red;
}

section{
    height: 100dvh;
    background-color: yellow;
}

这个方案无需禁用滚动，同时能避免缩放时的自动滚动问题，兼容性目前已覆盖主流浏览器。

方案3：限制用户缩放行为 #

通过调整viewport元标签，禁止用户缩放页面，彻底避免视口变化带来的滚动：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

注意：该方法会牺牲页面的可访问性，仅适合对交互有严格控制的场景。

内容的提问来源于stack exchange，提问作者Mehmet Ali K.