Форум

dc65k · #1 (**permalink**) 29.11.2020, 09:38

В процессе прокрутки страницы сам блок остается неподвижным, однако, положение скролла влияет на развитие некого сценария внутри него. Это могут быть движения персонажей, появление или исчезновение контента, анимации и так далее.
Пример:
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();

рони · #2 (**permalink**) 29.11.2020, 10:04

Сообщение от dc65k

справа визуально скролл идет вниз, а страница не скролится до определенного условия.

<!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>
class App {
    constructor() {
        this.init();
    }

    init() {
        window.addEventListener('scroll', this.onScrollDocumentHandler)
    }

    onScrollDocumentHandler(event) {
        let windowRelativeTop = window.pageYOffset;
        console.log(windowRelativeTop);
        if(windowRelativeTop < 700) {
            document.body.style.paddingTop = `${windowRelativeTop}px`
        }
    }
}

const app = new App();
</script>
</body>
</html>

voraa · #3 (**permalink**) 29.11.2020, 10:51

А чего размер скролбара меняется?
Проще с контейнером с абсолютным позиционированием и задать высоту body

<!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">
    <style>
    body {
		height: 2000px;
    }
    #cnt {
		position: absolute;
	}
     p:first-child {
       color:blue;
     }
    </style>
        <title>Document</title>
</head>
<body>
	<div id=cnt>
    <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>
     </div>
<script>
class App {
    constructor() {
        this.init();
    }
 
    init() {
        window.addEventListener('scroll', this.onScrollDocumentHandler)
    }
 
    onScrollDocumentHandler(event) {
        let windowRelativeTop = window.pageYOffset;
        console.log(windowRelativeTop);
        if(windowRelativeTop < 700) {
			document.getElementById('cnt').style.top = `${windowRelativeTop}px`;
        }
    }
}
 
const app = new App();
</script>
</body>
</html>

dc65k · #4 (**permalink**) 29.11.2020, 11:08

Всем спасибо. Судя по всему, пока лучший вариант, это тот, как сделано в примере, так как, варианты выше, я думаю не подходят, потому что визуально при добавлении стилей происходят скачки.

<!doctype html run>
<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">
    <title>Document</title>
    <style>
        html, body {
            height: 2000px;
        }

        .root {
            width: 100%;
            /*height: 100%;*/
            height: calc(100% * 5);
        }

        .container {
            position: sticky;
            top: 0;
        }
    </style>
</head>
<body>
<div class="root">
    <div class="container">
        <h1>Title</h1>
        <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>
</div>
</body>
</html>

рони · #5 (**permalink**) 29.11.2020, 11:24

dc65k,
добавьте run в свой код

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

dc65k · #6 (**permalink**) 29.11.2020, 11:45

Done.

Форум

Справочник

Discord чат

Курсы javascript