CSS Scroll Snap позволяет браузеру быстро переключаться между элементами в контейнере.Чтобы применить ту же логику к вертикальной прокрутке страницы, я обнаружил, что она должна применяться к <body>, а не к <html> (см. Ниже).Это не главная проблема, однако она эффективно создает область прокрутки из <body> вместо использования прокрутки окна.
Хотя это может показаться хорошим, у него есть пара побочных эффектов:
- Функции прокрутки окна больше нельзя использовать в javascript
- Эффект резиновой ленты в браузерах Apple менее отзывчив и отсутствует в Chrome на Mac.
Я хотел егочтобы выглядеть как можно более родным, поэтому единственным выводом было бы применить его к <html>, а не <body>.Однако применение этого способа препятствует его функционированию.Если вы примените его к обоим, он будет правильно отображаться в Safari, но в Chrome и Firefox он будет поврежден.
Проблема заключается не в том, что <body> создает разделение между родительским и дочерним элементом, как если бы другой <div>добавленный в иерархию, он все равно будет работать правильно.
Вот код функционирования, но он применяется к <body>, а не к <html>.
<html>
<body>
<div class="extra_parent">
<div class="child">ONE</div>
<div class="child">TWO</div>
<div class="child">THREE etc..</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
html {
height: 100vh;
overflow: hidden
}
.child {
position: relative;
height: 80vh;
font-size: 100px;
text-align: center;
line-height: 80vh;
color: #000;
scroll-snap-align: end;
}
Решить скрипку: https://jsfiddle.net/u8tsjven/