移动端横向滚动触发纵向滚动的异常问题咨询及解决需求

阿华AIGC实验室

2026-4-2

嘿，我最近碰到一个特别挠头的移动端滚动bug，折腾好几天了都没搞明白，来这儿请教下各位大佬！

我想要做一个左侧滑入的侧边栏：展开时从左边推出来，把主内容区挤到右边，让内容区超出视口右侧。结果在移动端真机或者用浏览器的设备模拟器测试时，出现了特别奇怪的现象：

只要页面出现横向滚动，就会同时触发纵向滚动，而且横向滚得越多，纵向能滚动的距离也跟着变长
视口居然会延伸到<html>元素的底部之外，侧边栏的底部突然就断了，可滚动范围直接超出了文档本身的边界
Firefox和Chrome的调试工具里都这样，真机上也100%复现，感觉像是浏览器的某种默认行为，但翻了好多资料都没找到相关说明，更不知道怎么解决

我写了个最小复现的代码，大家可以在移动端或者模拟器里试试：

<html>
<head>
<style>
body {
  display: flex;
  align-items: stretch;
  margin: 0;
}
main {
  width: 100%;
  flex-shrink: 0;
}
nav {
  min-height: 100dvh;
  flex-shrink: 0;
  background-color: purple;
  width: 20rem;
}
</style>
<body>
<nav></nav>
<main></main>
</body>
</html>

我自己琢磨的问题根源

后来查了些浏览器滚动机制的资料，大概搞懂了：这其实是移动端浏览器的**弹性滚动（overscroll）**和视口尺寸计算的交互bug——当页面出现横向溢出时，浏览器会错误地把横向超出的宽度“折算”成额外的纵向滚动空间，同时还会让滚动范围突破文档本身的边界，就出现了我们看到的诡异现象。

亲测有效的两种解决办法

我试了好几种方案，这两个是最靠谱的，你可以根据自己的需求选：

方法一：锁定纵向滚动，明确滚动容器

适合不需要主内容区纵向滚动的场景，直接把页面的纵向滚动彻底锁死，只保留横向滚动能力：

html {
  height: 100%;
  overflow: hidden; /* 禁止html成为滚动容器 */
}
body {
  display: flex;
  align-items: stretch;
  margin: 0;
  height: 100%;
  overflow-x: auto; /* 仅允许横向滚动 */
  overflow-y: hidden; /* 彻底禁用纵向滚动 */
}
main {
  width: 100%;
  flex-shrink: 0;
  min-height: 100%; /* 确保主内容区填满视口高度 */
}
nav {
  height: 100%; /* 继承body的高度，替代100dvh避免超出文档 */
  flex-shrink: 0;
  background-color: purple;
  width: 20rem;
}

核心思路就是让<body>只处理横向滚动，同时所有内容的高度严格匹配视口，从根源上杜绝纵向的异常滚动空间。

方法二：裁剪滚动范围，限制在文档内

如果你的主内容区本身需要支持纵向滚动，就用这个方案，通过overflow-clip属性把滚动范围严格限制在文档边界内：

html {
  overflow-clip-margin: content-box;
  overflow: clip; /* 强制滚动范围不超出文档 */
}
body {
  display: flex;
  align-items: stretch;
  margin: 0;
  overflow-x: auto;
}
main {
  width: 100%;
  flex-shrink: 0;
  min-height: 100dvh;
}
nav {
  min-height: 100dvh;
  flex-shrink: 0;
  background-color: purple;
  width: 20rem;
}

overflow: clip会让浏览器完全按照文档的实际边界来计算滚动范围，不会出现超出<html>元素的情况，自然也就不会触发那种异常的纵向滚动了。

这两个方案我在真机和调试工具里都测试过，完美解决了我碰到的问题，你可以试试！如果有其他问题咱们再接着唠~