Чтобы настроить последовательную прокрутку страницы, сначала в обычном режиме, а затем в полноэкранном режиме, вы можете использовать JavaScript и CSS.
Вот пример кода, который позволяет настроить такую последовательную прокрутку:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<div class="content">
<!-- ваш контент страницы -->
</div>
</body>
</html>
```
CSS (styles.css):
```css
body {
overflow: hidden;
height: 100vh;
}
.content {
height: 200vh; /* высота содержимого страницы */
overflow-y: scroll;
}
.fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow-y: scroll;
z-index: 9999;
}
```
JavaScript (script.js):
```javascript
document.addEventListener('DOMContentLoaded', function() {
window.addEventListener('scroll', function() {
var scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if (scrollPos > document.querySelector('.content').offsetHeight - window.innerHeight) {
// Добавить полноэкранный режим
document.body.classList.add('fullscreen');
} else {
// Вернуться к обычному режиму
document.body.classList.remove('fullscreen');
}
});
});
```
В этом примере мы добавляем обработчик события, который слушает событие прокрутки страницы. Если положение прокрутки превышает высоту содержимого страницы за вычетом высоты окна, то мы добавляем класс `fullscreen` к `<body>` и используем CSS для переключения в полноэкранный режим. В противном случае мы удаляем класс `fullscreen` и возвращаемся в обычный режим.
Убедитесь, что вы измените путь к файлам стилей и скрипта в соответствии со своей структурой проекта.
Этот код позволит вам организовать полноэкранную прокрутку с периодами обычной прокрутки по вертикали на веб-странице. При достижении конца страницы она переключится в полноэкранный режим и продолжит прокручиваться, как в полноэкранном окне.