我可以使用 javascript 滚动事件更改 div 的宽度和高度吗？答案

【问题标题】：Can I change the width and height of a div using javascript scroll event?我可以使用 javascript 滚动事件更改 div 的宽度和高度吗？
【发布时间】：2020-02-28 15:39:58
【问题描述】：

我的 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";
}

【问题讨论】：

请阅读How to Ask - 提供minimal reproducible example。
好的，我会用我的代码编辑问题

标签： javascript jquery events scroll

【解决方案1】：

希望对你有帮助

<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>

【讨论】：

【解决方案2】：

您可能想从这里开始：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll

您可以在要更改大小的区域上设置.onscroll 事件，如果您希望用户能够滚动过您正在调整大小的元素，也可以在整个主体上设置。

【讨论】：