如何用CSS实现横向滚动？滚动方向异常问题求助

你的代码存在两处关键问题，导致页面只能垂直滚动而无法触发横向滚动：

问题1：未限制body的全局溢出 #

当.app-container启用水平滚动时，浏览器会为它添加水平滚动条，该滚动条会占用一定垂直空间。你的body设置了height:100vh但未限制垂直溢出，当.app-container的内容高度（100vh）加上滚动条高度超过body的100vh时，就会出现全局垂直滚动条，干扰横向滚动操作。

问题2：.app-container宽度继承存在歧义 #

.app-container的width:100%继承自body的100vw，但部分浏览器中100vw会包含垂直滚动条宽度，导致.app-container的实际可滚动空间被压缩，甚至出现布局偏移。

修改后的代码 #

CSS 部分 #

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden; /* 禁用body的全局滚动 */
}

.app-container {
  width: 100vw; /* 明确绑定视口宽度，避免继承问题 */
  height: 100%;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
  /* 可选：隐藏水平滚动条，保留滚动功能 */
  scrollbar-width: none;
}

/* 针对Chrome、Safari等浏览器隐藏滚动条 */
.app-container::-webkit-scrollbar {
  display: none;
}

section {
  flex: none;
  width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
}

HTML 部分（无需修改） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./dist/css/main.min.css" type="text/css">
    <title>Document</title>
</head>
<body>
    <div class="app-container">
        <section><h1>page 1</h1></section>
        <section><h1>page 2</h1></section>
        <section><h1>page 3</h1></section>
        <section><h1>page 4</h1></section>
      </div>
</body>
</html>

关键修改说明 #

• body { overflow: hidden; }：彻底禁用body的全局滚动，确保所有滚动操作都在.app-container内执行。
• .app-container的width:100%改为width:100vw：明确绑定视口宽度，消除继承带来的布局歧义。
• 可选的滚动条隐藏样式：优化页面视觉效果，同时不影响滚动功能。

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