При открытий контента появляется скролл и смещает страницу (HTML,CSS, JS)

Question

const links = document.querySelectorAll('.link');
const blocks = document.querySelectorAll('.section');
for (let i = 0; i < links.length; i++) {
  links[i].addEventListener('click', () => {
    blocks.forEach(block => {
      block.classList.add('hide');
    });
    blocks[i].classList.remove('hide');
  });
}

body {
  margin: 0;
  font-family: sans-serif;
}
.menu {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  background: lightgrey;
  position: absolute;
  left: 0;
  top: 0;
}
.section {
  width: 100%;
  min-height: 100vh;
  background: lightblue;
  border-bottom: 1px solid #000;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold'
}
.hide {
  display: none;
}
.section--page {
  min-height: 900px;
}

<div class="menu">
  <a href="#" class="link">1</a>
  <a href="#" class="link">2</a>
  <a href="#" class="link">3</a>
  <a href="#" class="link">4</a>
  <a href="#" class="link">5</a>
</div>
<section class="section">1</section>
<section class="section section--page hide">2</section>
<section class="section hide section--page">3</section>
<section class="section hide">4</section>
<section class="section hide">5</section>

В общем есть меню при нажатий на пункт меню меняется контент. Есть страницы, где высота больше чем height: 100vh, и есть у которых просто 100vh. У тех у которых высота больше чем 100vh появляется вертикальный скролл, и если переключать между контентом - скролл то появляется, то убирается и появляется эффект дерганья. Может как то можно скролл повесить выше контента или пофиксить?

Answer 1

Замените min-height: 100vh; на min-height: 100vh!important;

Должно помочь

const links = document.querySelectorAll('.link');
const blocks = document.querySelectorAll('.section');
for (let i = 0; i < links.length; i++) {
  links[i].addEventListener('click', () => {
    blocks.forEach(block => {
      block.classList.add('hide');
    });
    blocks[i].classList.remove('hide');
  });
}

body {
  margin: 0;
  font-family: sans-serif;
}
.menu {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  background: lightgrey;
  position: absolute;
  left: 0;
  top: 0;
}
.section {
  width: 100%;
  min-height: 100vh!important;
  background: lightblue;
  border-bottom: 1px solid #000;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold'
}
.hide {
  display: none;
}
.section--page {
  min-height: 900px;
}

<div class="menu">
  <a href="#" class="link">1</a>
  <a href="#" class="link">2</a>
  <a href="#" class="link">3</a>
  <a href="#" class="link">4</a>
  <a href="#" class="link">5</a>
</div>
<section class="section">1</section>
<section class="section section--page hide">2</section>
<section class="section hide section--page">3</section>
<section class="section hide">4</section>
<section class="section hide">5</section>

Answer 2

добавь класс .section--page в другие секции. Нужно чтобы секции были одинаковыми по высоте (в данном случае), тогда скролл будет везде, но если скролл вообще не нужен, просто удали класс .section--page

Answer 3

Добавление !important в min-height:100vh!important; всего-лишь перекрывает класс .section--page и код min-height: 900px; становится бесполезным

БЛОГ НА HUSL

При открытий контента появляется скролл и смещает страницу (HTML,CSS, JS)

Ответы (3 шт):