Блог

Главная - Вопросы по программированию - Как заставить CSS scroll snap работать правильно?

Как заставить CSS scroll snap работать правильно?

#html #css

#HTML #css

Вопрос:

Я не могу заставить scroll snap работать в моем проекте. Можете ли вы найти ошибку? Я смотрел много видео и читал сообщения в блогах о scroll snap в CSS, но все, что я вижу, это то, что я уже пробовал. Я просто получаю нормальное поведение прокрутки.

 * {
  margin: 0;
  padding: 0;
}

.scrollcontainer {
  scroll-snap-type: y mandatory;
  scroll-snap-points-y: repeat(100vh);
}

.scrollchild {
  scroll-snap-align: start;
  background-color: #000000;
  height: 100vh;
}

.scrollchild:nth-of-type(even) {
  background: #ffffff;
}  
 <div class="scrollcontainer">
  <section class="scrollchild">
    <p>one</p>
  </section>
  <section class="scrollchild">
    <p>two</p>
  </section>
</div>

Ответ №1:

Ваша единственная проблема в том, что прокрутка находится не в scrollcontainer, а в теле. scrollcontainer на самом деле никогда не прокручивается.

Это должно исправить это:

 * {
    margin: 0;
    padding: 0;
}

.scrollcontainer {
    scroll-snap-type: y mandatory;
    scroll-snap-points-y: repeat(100vh);
    
    height: 100vh;
    overflow-y: scroll;
}

.scrollchild {
    scroll-snap-align: start;
    background-color: #000000;
    height: 100vh;
}

.scrollchild:nth-of-type(even) {
    background: #ffffff;
}  
 <div class="scrollcontainer">
<section class="scrollchild">
  <p>one</p>
</section>
<section class="scrollchild">
  <p>two</p>
</section>
</div>