В процессе прокрутки страницы сам блок остается неподвижным, однако, положение скролла влияет на развитие некого сценария внутри него. Это могут быть движения персонажей, появление или исчезновение контента, анимации и так далее.
Пример:
https://www.sber.ru/salute/smartmark...721.1606628165
Мне известно, что есть различные библиотеки, реализующие данный функционал, но я пытаюсь понять, как без их использования реализовать базовую вещь. Например, на странице уже есть определенное количество контента, мы начинаем скролить, справа визуально скролл идет вниз, а страница не скролится до определенного условия.
Я предполагаю, что необходимо сделать возможность прокрутки до определенной позиции, но вопрос с точки зрения синтаксиса как это сделать?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="root">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eius et iste quae qui saepe sint ut. Aliquid blanditiis dignissimos ducimus, eligendi esse ex explicabo id iste nihil, quos sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eius et iste quae qui saepe sint ut. Aliquid blanditiis dignissimos ducimus, eligendi esse ex explicabo id iste nihil, quos sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eius et iste quae qui saepe sint ut. Aliquid blanditiis dignissimos ducimus, eligendi esse ex explicabo id iste nihil, quos sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eius et iste quae qui saepe sint ut. Aliquid blanditiis dignissimos ducimus, eligendi esse ex explicabo id iste nihil, quos sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eius et iste quae qui saepe sint ut. Aliquid blanditiis dignissimos ducimus, eligendi esse ex explicabo id iste nihil, quos sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eius et iste quae qui saepe sint ut. Aliquid blanditiis dignissimos ducimus, eligendi esse ex explicabo id iste nihil, quos sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eius et iste quae qui saepe sint ut. Aliquid blanditiis dignissimos ducimus, eligendi esse ex explicabo id iste nihil, quos sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eius et iste quae qui saepe sint ut. Aliquid blanditiis dignissimos ducimus, eligendi esse ex explicabo id iste nihil, quos sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eius et iste quae qui saepe sint ut. Aliquid blanditiis dignissimos ducimus, eligendi esse ex explicabo id iste nihil, quos sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eius et iste quae qui saepe sint ut. Aliquid blanditiis dignissimos ducimus, eligendi esse ex explicabo id iste nihil, quos sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eius et iste quae qui saepe sint ut. Aliquid blanditiis dignissimos ducimus, eligendi esse ex explicabo id iste nihil, quos sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eius et iste quae qui saepe sint ut. Aliquid blanditiis dignissimos ducimus, eligendi esse ex explicabo id iste nihil, quos sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eius et iste quae qui saepe sint ut. Aliquid blanditiis dignissimos ducimus, eligendi esse ex explicabo id iste nihil, quos sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eius et iste quae qui saepe sint ut. Aliquid blanditiis dignissimos ducimus, eligendi esse ex explicabo id iste nihil, quos sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eius et iste quae qui saepe sint ut. Aliquid blanditiis dignissimos ducimus, eligendi esse ex explicabo id iste nihil, quos sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eius et iste quae qui saepe sint ut. Aliquid blanditiis dignissimos ducimus, eligendi esse ex explicabo id iste nihil, quos sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eius et iste quae qui saepe sint ut. Aliquid blanditiis dignissimos ducimus, eligendi esse ex explicabo id iste nihil, quos sapiente.</p>
</div>
<script src="app.js"></script>
</body>
</html>
class App {
constructor() {
this.init();
}
init() {
window.addEventListener('scroll', this.onScrollDocumentHandler)
}
onScrollDocumentHandler = (event) => {
// console.log(pageYOffset);
let windowRelativeTop = document.documentElement.getBoundingClientRect().top;
console.log(windowRelativeTop);
// let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
// console.log(windowRelativeBottom);
}
}
const app = new App();