scroll-snap-align и scroll-snap-type недостаточно?

Question

Я пытаюсь использовать это:
https://developer.mozilla.org/docs/Web/CSS/scroll-snap-type
https://developer.mozilla.org/docs/Web/CSS/scroll-snap-align

Пример, который я хочу воспроизвести: https://codepen.io/mykiwi/pen/xxwPKJr?editors=1100

<div class="scroller">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

.scroller {
  text-align:left;
  height:250px;
  width:270px;
  overflow-y:scroll;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  border:1px solid #000;
  scroll-snap-type:y mandatory
}
.scroller>div {
  flex:0 0 250px;
  background-color:#663399;
  color:#fff;
  font-size:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  scroll-snap-align:start;
}
.scroller>div:nth-child(even) {
  background-color:#fff;
  color:#663399
}

Мой код: https://codepen.io/mykiwi/pen/mdeqePo?editors=1100
У меня есть Бульма на фоне тоже

Что неправильно / отсутствует в моем CSS воспроизвести пример?
Спасибо

Answer 1

Это немного сложно, чтобы заставить его работать, и так как MDN не описывает это очень хорошо, это усложняет.

---

В чем именно проблема?

предоставленный вами элемент упаковки не соответствует ожидаемому действию. Так что же это значит?

Чтобы убедиться, что scroll-snap-type работает правильно , мы должны убедиться, что единственная доступная полоса прокрутки в нашем окне - это прокручиваемый элемент прокрутки , который в вашем случае это это деление по имени класса screen.

Как это исправить?

Так что все, что вам нужно сделать, это убедиться, что элемент прокрутки точно связан с родительским переносом элемент , который в вашем случае обозначен screen именем класса. Чтобы убедиться, что полоса прокрутки, которую вы видите в правой части , вы должны сделать переполнение body и html до hidden, чтобы предотвратить их прокрутку. просто так:

html,
body {
  overflow: hidden;
}

Затем вам нужно включить правую полосу прокрутки , которая относится к разделу screen.

.screen {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

Так что она будет работать как шарм.

Вот пример работающего в реальном времени: codepen.io

---

Также в SO есть похожая проблема, которую вы можете найти здесь .