Могу ли я изменить ширину и высоту элемента div, используя событие прокрутки javascript? - PullRequest
Новая
       4

Могу ли я изменить ширину и высоту элемента div, используя событие прокрутки javascript?

0 голосов
/ 28 февраля 2020

Мой div покрывает весь экран, т.е. ширина и высота div составляет 100%. И я хочу, чтобы событие прокрутки уменьшало ширину и высоту этого div при прокрутке вверх и увеличивало ширину и высоту div при прокрутке вниз. Является ли это возможным? Пожалуйста, помогите мне здесь. Если я добавляю событие прокрутки здесь, оно не работает, может быть, потому что прокрутка не происходит, поскольку div умещается на весь экран.

вот мой код 

<html>
    <head>
        <script src="myscript.js"></script>
    </head>
    <body onload="myfunc()">
        <div class="firstdiv">

        </div>
    </body>
</html>

function myfunc(){
    var x = document.getElementsByClassName("firstdiv");
    console.dir(x);
    x[0].style.width = "100%";
    x[0].style.height = "100%";
    x[0].style.background = "red";
    x[0].style.position = "relative";
    x[0].style.top = "0";
    x[0].style.left = "0";
}

Ответы [ 2 ]

0 голосов
/ 28 февраля 2020

Я надеюсь, что это может помочь вам 

<body style="overflow: scroll; height: 1000px;" onload="scrollDetect()">
    <div class="firstdiv" style="border:1px solid black; margin: 0 auto; width: 200px;height: 200px;">
    </div>

    <script>
        function scrollDetect() {
            let div = document.querySelector('.firstdiv')
            var lastScroll = 0;
            window.onscroll = function () {
                let currentScroll = document.documentElement.scrollTop; // Get Current Scroll Value
                if (currentScroll > 0 && lastScroll <= currentScroll) {
                    lastScroll = currentScroll;
                    div.style.width = '50%'
                    div.style.height = "50%";
                    div.style.background = "red";
                    div.style.position = "relative";
                    div.style.top = "0";
                    div.style.left = "0";
                } else {
                    lastScroll = currentScroll;
                    div.style.width = '200px'
                    div.style.height = '200px'
                }
            };
        }
    </script>
</body>
0 голосов
/ 28 февраля 2020

Вы, вероятно, хотите начать здесь: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll

Вы можете установить событие .onscroll в области, размер которой хотите изменить, или, возможно, на всем теле. если вы хотите, чтобы пользователь мог прокручивать элемент, размер которого вы изменяете.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...