CSS - Scrolling to top of page is blocked when inner div exands to the top with flex - Html

ProgrammingNoob
March 8, 2023
114 views
0 votes
2 Answers

I was following a tutorial on youtube and discovered that when the window size is small, and my content, which expands on click, when above the size of the window, does not allow me to scroll to the top, yet I can scroll to the bottom and back up to that point in which I can not scroll to the top no longer.

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 {
  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;
}

<!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>

I am new to css and html so I tried to instead of using justify-content : center; and align-items: center;, to use margin: auto;, but that did not work. I figured this problem was happening because flex prioritizes being in the center regardless of whether it expands across the limits of the outer content.

Answers

It’s a combination of using 100vh on the body along with height: 200px on .answer when it’s active.

It’s doing this when your browser is small because when you open each accordion at a small screen (<600px) it’s trying to add the static height‘s while maintaining body {height: 100vh;}.

What I would do is just use a media query to handle this on smaller screens both vertically and horizontally.

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 {
  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;
}

@media only screen and (max-height: 840px) and (max-width: 1000px) {
  body {
    height: auto;
  }
}

<!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>

Examples from my comment:

keyword safe from MDN :

safe

Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start.

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 {
  background: url(/projects/images/project-3-image.jpg) no-repeat center center/cover;
  height: 100vh;
  display: flex;
  justify-content: safe center;
  align-items: safe 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;
}

<!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 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>

Margin:auto on the child instead:

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 {
  background: url(/projects/images/project-3-image.jpg) no-repeat center center/cover;
  height: 100vh;
  display: flex;
  /*justify-content: center;
  align-items: center;*/
}

.accordion {
margin:auto;
  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;
}

<!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 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>

Please signup or login to give your own answer.

Click here to cancel reply.

CSS — Scrolling to top of page is blocked when inner div exands to the top with flex – Html

Answers