固定侧边菜单滚动实现及body滚动禁用问题排查

问题修复核心要点 #

• 给侧边栏设置固定视口高度，触发滚动条
• 阻止侧边栏滚动溢出到body
• 重置默认边距避免布局偏差

修改后的CSS代码 #

/* 重置html和body默认边距，确保高度计算准确 */
html, body {
  margin: 0;
  padding: 0;
}

article {
  height: 300px;
}

aside {
  position: fixed;
  top: 0;
  /* 用100vh固定高度为视口高度，替代min-height:100% */
  height: 100vh;
  width: 23%;
  display: flex;
  flex-direction: column;
  z-index: 3;
  overflow-y: auto;
  overflow-x: hidden; /* 不需要横向滚动可隐藏 */
  /* 阻止滚动溢出到body */
  overscroll-behavior: contain;
}

aside article {
  background-color: blue;
}

body {
  overflow-y: hidden;
}

完整HTML代码（结构无需修改，替换CSS即可） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <article>
    <h2></h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam?
      Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
    </p>
  </article>
  <article>
    <h2></h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam?
      Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
    </p>
  </article>
  <article>
    <h2></h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam?
      Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
    </p>
  </article>
  <article>
    <h2></h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam?
      Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
    </p>
  </article>
  <article>
    <h2></h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam?
      Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
    </p>
  </article>
  <aside>
    <article>
      <h2></h2>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam?
        Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
      </p>
    </article>
    <article>
      <h2></h2>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam?
        Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
      </p>
    </article>
    <article>
      <h2></h2>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam?
        Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
      </p>
    </article>
    <article>
      <h2></h2>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio dicta obcaecati iste culpa amet earum totam?
        Aliquam, rem deleniti quod blanditiis ad ducimus autem hic aperiam earum nostrum maiores. Temporibus?
      </p>
    </article>
  </aside>
</body>
</html>

关键修改说明 #

1. height: 100vh替代min-height:100%：
   min-height:100%会让aside随内容高度自适应，无法触发滚动。100vh强制元素高度等于当前视口高度，内容超出时自动显示垂直滚动条。

2. 添加overscroll-behavior: contain：
   解决侧边栏滚动到边界时，继续滚动会带动body滚动的问题，将滚动行为限制在aside内部。

3. 重置html和body的margin/padding：
   浏览器默认的边距会导致aside高度计算偏差，重置后确保侧边栏完全占满视口高度。

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