移动端页面滚动超出HTML范围及横向滚动禁用问题求助

首先你遇到的核心问题根源在于html标签设置了width: 725%——这个值直接让页面宽度变成了视口的7.25倍，移动端滚动时自然会滚出可视区域，单纯加overflow: hidden因为这个超宽的根元素设置，根本起不到限制作用。另外想要保留侧边内容同时禁用页面整体横向滚动，得用容器嵌套的思路来处理，具体方案如下：

1. 修正根元素的基础布局设置 #

先把html的宽度改回正常的100%，同时精准控制横向溢出：

html {
  overflow-x: hidden; /* 只隐藏横向溢出，不影响纵向滚动 */
  height: 100%;
  width: 100%; /* 恢复为视口宽度，避免根元素超宽 */
}

同时给body也加上横向溢出限制，确保双重保险：

body {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  margin: 0 0 30px;
  position: relative;
  overflow-x: hidden; /* 禁止body层面的横向滚动 */
  width: 100%;
}

2. 保留侧边内容的同时禁用页面横向滚动 #

如果侧边内容需要被查看，不能直接砍掉，建议给所有超出视口的内容套一个独立的滚动容器：

.side-content-wrapper {
  overflow-x: auto; /* 容器内部允许横向滚动查看侧边内容 */
  width: 100%;
  /* 可选：隐藏滚动条，优化移动端体验 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.side-content-wrapper::-webkit-scrollbar { /* Chrome/Safari */
  display: none;
}

把原本的侧边内容放到这个.side-content-wrapper容器里，这样页面整体不会出现横向滚动条，但用户可以在容器内横向滑动查看所有侧边内容，完美兼顾需求。

3. 排查额外溢出因素 #

做完上面的设置后，如果还是有滚动出可视区域的问题，打开Chrome DevTools的移动端模式，检查这两个点：

• 有没有绝对/固定定位的元素，其left/right值导致超出了视口范围，这类元素需要调整定位规则或者给父容器加overflow: hidden；
• 用DevTools的「Elements」面板查看元素盒模型，找到哪个元素的width或者margin/padding导致了横向溢出，针对性修正。

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