Скролл-оснастка не работает. Я посмотрел существующие вопросы, и ни один из них не помог

Question

Я пытаюсь реализовать эффект прокрутки. Но есть проблема, и я не знаю, что это такое. Я удалил лишние детали, чтобы мы оставили суть вопроса.

Вот мой html код:

<img src="1.JPG" class="stop">
<img src="1.JPG" class="stop">
<img src="1.JPG" class="stop">
<img src="1.JPG" class="stop">
<img src="1.JPG" class="stop">
<img src="1.JPG" class="stop">
<img src="1.JPG" class="stop">
<img src="1.JPG" class="stop">
<img src="1.JPG" class="stop">
<img src="1.JPG" class="stop">

А вот мой css код:

body{
  scroll-snap-type: mandatory;
  scroll-snap-align: start;
}
img{
  width: 50%;
}
stop{
  scroll-snap-stop: always;
}

Answer 1

Вы сделали две ошибки, и в вашем CSS

1. необходимы некоторые улучшения * Не применяйте scroll-snap-type к тегу body, скорее сделайте контейнер и примените это свойство контейнера.

2. scroll-snap-align не работает на родительском контейнере, оно работает только на дочернем элементе

Улучшения:

1. Добавлено scroll-snap-type: y mandatory;, поэтому элементы будут привязываться по вертикали
2. Установить overflow-y: scroll, чтобы сделать возможной вертикальную прокрутку
3. Также установить max-height для контейнера.

Итак, я попробовал это на codepen Вот CSS:

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

img {
    height: 100vh;
    scroll-snap-align: start;
}

Вот рабочая ручка ссылка

Надеюсь, это очистит ваш запрос.