Flex布局下内部div展开后无法滚动到页面顶部的问题

问题描述 #

跟着YouTube教程制作手风琴组件时发现：当窗口尺寸较小时，点击展开的内容高度超过窗口后，无法滚动到页面顶部，但可以滚动到底部，再向上滚动也无法到达顶部。尝试用margin:auto替换justify-content:center和align-items:center，问题未解决。推测该问题是因为Flex布局优先保持居中，而忽略内容超出容器范围的情况。

原代码 #

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">
  <title>Accordian</title>
  <link rel="stylesheet" href="project3.css">
</head>

<body>
  <div class="accordion">
    <h2 class="accordion-title">Freqently Asked Questions</h2>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>
  </div>
  <script src="project3.js"></script>
</body>

</html>

CSS #

body {
  background: url(/projects/images/project-3-image.jpg) no-repeat center center/cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.accordion {
  background-color: #fff;
  width: 65%;
  padding: 30px;
  border-radius: 30px;
}

.accordion .accordion-title {
  margin-bottom: 30px;
  text-align: center;
}

.accordion .content-container .question {
  padding: 18px 0px;
  font-size: 22px;
  cursor: pointer;
  border-bottom: 1px solid #000;
  position: relative;
  transition: .5s;
}

.accordion .content-container .question::after {
  content: '+';
  position: absolute;
  right: -5px;
}

.accordion .content-container .answer {
  padding-top: 15px;
  font-size: 22px;
  line-height: 1.5;
  width: 100%;
  height: 0px;
  overflow: hidden;
  transition: .5s;
}


/* JS Styling Link */

.accordion .content-container.active .answer {
  height: 200px;
}

.accordion .content-container.active .question {
  font-size: 18px;
  transition: .5s;
}

.accordion .content-container.active .question::after {
  content: '-';
  font-size: 30px;
  transition: .5s;
}

JavaScript #

const accordion = document.getElementsByClassName('content-container');

for (i = 0; i < accordion.length; i++) {
  accordion[i].addEventListener('click',
    function() {
      this.classList.toggle('active'); // toggles the class name on or off
    }
  )
}

问题原因 #

你的推测完全正确，问题根源就是body的Flex布局设置：

• height:100vh把body的高度固定为视口高度，当手风琴展开后总内容高度超过视口时，内容会从body的上下两端溢出。
• 同时justify-content:center和align-items:center强制让内容在视口中居中，导致顶部溢出的部分被挤出视口范围，而浏览器的滚动是基于视口的，所以无法滚动到被挤出的顶部区域。

解决方案 #

提供两种可行的修复方案，根据需求选择：

方案一：让body高度随内容自适应（推荐） #

把body的height:100vh改为min-height:100vh，这样当内容高度小于视口时，body保持100vh高度并居中内容；当内容超过视口时，body高度自动扩展，滚动条可以正常滚动到顶部。

修改后的body样式：

body {
  background: url(/projects/images/project-3-image.jpg) no-repeat center center/cover;
  min-height: 100vh; /* 替换height为min-height */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0; /* 移除默认margin，避免滚动条出现不必要的留白 */
}

如果希望内容在视口较小时不贴顶，可以添加顶部内边距：

body {
  background: url(/projects/images/project-3-image.jpg) no-repeat center center/cover;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}

方案二：给body添加垂直滚动条 #

保留body的height:100vh，但添加overflow-y:auto，让body在内容溢出时显示垂直滚动条，这样即使内容居中溢出，也能通过滚动条访问到顶部内容。

修改后的body样式：

body {
  background: url(/projects/images/project-3-image.jpg) no-repeat center center/cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto; /* 添加垂直滚动条 */
  margin: 0;
}

总结 #

方案一更符合常规页面的滚动逻辑，内容少时保持居中，内容多时自然扩展高度；方案二则固定body高度，通过滚动条适配溢出内容，适合需要严格保持body视口高度的场景。

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