能否通过JavaScript Scroll事件调整全屏div的宽高？

嘿，你猜中问题根源啦！确实是因为你的div占满了整个屏幕，页面没有可滚动的空间，所以scroll事件根本没机会触发～ 我来给你调整一下代码，解决这个问题：

首先，我们得先解决滚动事件触发的核心问题：当页面内容高度刚好等于屏幕高度时，浏览器不会出现滚动条，自然监听不到滚动行为。所以第一步要给页面创造可滚动的空间。

接下来，我们需要监听window的滚动事件，通过对比上一次的滚动位置来判断是向上还是向下滚动，然后动态修改div的宽高。

完整代码示例 #

<html>
<head>
    <style>
        /* 给body设置最小高度，让页面有足够滚动空间 */
        body {
            margin: 0;
            min-height: 200vh;
        }
        .firstdiv {
            position: fixed; /* 固定div在视口，滚动时位置不变只改尺寸 */
            top: 0;
            left: 0;
            background: red;
            width: 100%;
            height: 100%;
            transition: all 0.1s ease; /* 加过渡动画让尺寸变化更平滑 */
        }
    </style>
</head>
<body onload="myfunc()">
    <div class="firstdiv"></div>
    <script>
        let lastScrollTop = 0;
        let targetDiv;

        function myfunc(){
            targetDiv = document.querySelector(".firstdiv");
            // 绑定window的滚动事件
            window.addEventListener("scroll", handleScroll);
        }

        function handleScroll() {
            const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
            
            // 判断滚动方向：向上滚动（当前位置 < 上一次位置），向下反之
            if (currentScrollTop < lastScrollTop) {
                // 向上滚动：缩小div，每次减少屏幕宽高的2%（可自行调整数值）
                const newWidth = parseInt(window.getComputedStyle(targetDiv).width) - window.innerWidth * 0.02;
                const newHeight = parseInt(window.getComputedStyle(targetDiv).height) - window.innerHeight * 0.02;
                // 设置最小宽高，避免缩得太小
                targetDiv.style.width = Math.max(newWidth, window.innerWidth * 0.3) + "px";
                targetDiv.style.height = Math.max(newHeight, window.innerHeight * 0.3) + "px";
            } else {
                // 向下滚动：增大div，每次增加屏幕宽高的2%
                const newWidth = parseInt(window.getComputedStyle(targetDiv).width) + window.innerWidth * 0.02;
                const newHeight = parseInt(window.getComputedStyle(targetDiv).height) + window.innerHeight * 0.02;
                // 设置最大宽高，避免超出太多
                targetDiv.style.width = Math.min(newWidth, window.innerWidth * 1.5) + "px";
                targetDiv.style.height = Math.min(newHeight, window.innerHeight * 1.5) + "px";
            }
            
            lastScrollTop = currentScrollTop;
        }
    </script>
</body>
</html>

关键改动说明 #

• 给body设置min-height: 200vh：让页面高度是屏幕的2倍，强制浏览器出现滚动条，scroll事件就能正常触发了。
• 把div的position改成fixed：这样滚动页面时，div会固定在视口内，不会跟着页面滚动，我们只需要专注调整它的宽高即可。
• 通过lastScrollTop判断滚动方向：对比当前滚动位置和上一次的位置，精准区分向上/向下滚动行为。
• 添加过渡动画：让div尺寸变化更流畅，不会显得生硬突兀。
• 设置宽高边界：避免div缩得太小或者变得过大，你可以根据需求自行调整max/min的比例数值。

直接运行上面的代码，滚动页面就能看到div的尺寸随滚动方向变化啦～

内容的提问来源于stack exchange，提问作者Bikash