Я пытаюсь создать страницу с разделами, которые всегда привязываются к полноэкранному режиму. Я использую CSS-подход scroll-snap-align.
Ошибка: при прокрутке вверх вверху страницы или вниз внизу страницы появляется пробел. Этот разрыв становится больше, чем больше вы пытаетесь прокрутить вверх/вниз. Эта ошибка появляется только в Edge и Chrome, но не в Safari и Firefox.
См. пример здесь: зеленый — это фон html, а черный — первая секция прокрутки после четырехкратной прокрутки вверх.
Вот код, чтобы попробовать:
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title>Scroll Snap Align</title>
<style>
html, body, section {
margin: 0;
}
html {
scroll-snap-type: y mandatory;
background: greenyellow;
}
body {
height: 100vh;
overflow: scroll;
overflow-x: hidden;
}
section {
scroll-snap-align: start;
padding: 1rem;
height: 100vh;
}
</style>
</head>
<body>
<section class = "first" style = "background: black; color: white">
Section 1
</section>
<section class = "after" style = "background: yellow">
Section 2
</section>
<section class = "after" style = "background: orange">
Section 3
</section>
<section class = "last" style = "background: orangered">
Section 4
</section>
</body>
</html>
Я очень благодарен за идеи решения или комментарии!
🤔 А знаете ли вы, что...
CSS поддерживает медиа-запросы, что позволяет разрабатывать стили для разных устройств и разрешений экранов.