xs屏幕下页面水平滚动设置失效：如何实现按最小宽度滚动？

你的代码不生效的核心原因是：浏览器的滚动条由根元素<html>控制，而非<body>；同时仅给<body>设置min-width无法确保页面内容不被挤压缩小。

以下是两种可行的解决方案：

方案一：使用包裹容器（推荐） #

给页面所有内容添加一个顶级容器，将最小宽度和滚动逻辑绑定到容器和<body>上：

<body>
  <div class="page-wrapper">
    <!-- 所有页面内容都放在这个容器里 -->
  </div>
</body>

/* 重置默认边距，避免影响宽度计算 */
body {
  margin: 0;
  overflow-x: auto; /* 视口不足时显示水平滚动条 */
}

.page-wrapper {
  min-width: 350px; /* 强制容器最小宽度为350px */
  padding: 1rem; /* 可选：添加内边距避免内容贴边 */
}

方案二：直接设置根元素 #

如果不想额外添加容器，可以直接给<html>和<body>设置样式：

html {
  min-width: 350px; /* 强制根元素最小宽度 */
  overflow-x: auto;
}

body {
  margin: 0; /* 移除默认边距 */
}

为什么你的原代码不生效？ #

1. 滚动条归属问题：浏览器的水平滚动条默认由<html>元素触发，你给<body>设置overflow-x:scroll只会控制<body>内部内容的滚动，而非整个页面。
2. 内容挤压：如果页面内的元素设置了width:100%或max-width:100%，它们会跟着视口宽度缩小，即使<body>有min-width，也会让你误以为页面整体缩小了——而添加顶级容器后，容器的min-width会强制内部元素至少保持350px宽度。

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