向下滚动放大元素、占满屏幕后上移的前端交互实现问题

核心逻辑调整说明 #

• 新增位移偏移量变量，拆分交互为两个阶段：未达最大缩放值时执行缩放，达到阈值后执行上移
• 回滚时先还原元素位置，再缩小元素，符合用户操作直觉
• 修正原代码中直接对比transform字符串的逻辑错误，改用数值判断更精准
• 新增过渡属性让动画更丝滑

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>滚动缩放位移交互</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .zoom{  
            height:100vh;  
            width:100%;  
            display:grid;  
            place-items:center;  
            position:fixed;  
            top: 0;  
            left:0;
            background: url('img/bg.png');
            /* 新增过渡让动画更流畅 */
            transition: transform 0.08s linear;
        }
        .afterzoom{
            height: 200vh;
            background: red;
        }
        img {
            /* 避免图片变形 */
            object-fit: contain;
        }
    </style>
</head>
<body>
    <div class="zoom">  
        <img src="img/square.png" alt="缩放元素">
    </div>
    <div class="afterzoom"></div>
    <script>
        const zoomElement = document.querySelector(".zoom");
        let zoom = 1;
        const ZOOM_SPEED = 0.1;
        // 最大缩放阈值，可根据你的图片初始宽度调整，放大到这个值刚好占满屏幕
        const MAX_ZOOM = 5;
        let offsetY = 0;
        // 上移速度，可根据需求调整
        const MOVE_SPEED = 20;

        document.addEventListener("wheel", function(e) {  
            // 阻止默认滚动避免页面抖动
            e.preventDefault();
            const delta = e.deltaY > 0 ? 1 : -1;

            if (delta > 0) {
                // 向下滚动：先放大再上移
                if (zoom < MAX_ZOOM) {
                    zoom = Math.min(zoom + ZOOM_SPEED, MAX_ZOOM);
                } else {
                    offsetY -= MOVE_SPEED;
                }
            } else {
                // 向上滚动：先复位位置再缩小
                if (offsetY < 0) {
                    offsetY = Math.min(offsetY + MOVE_SPEED, 0);
                } else {
                    zoom = Math.max(zoom - ZOOM_SPEED, 1);
                }
            }
            // 同时应用缩放和位移
            zoomElement.style.transform = `scale(${zoom}) translateY(${offsetY}px)`;
        });
    </script>
</body>
</html>

参数调整说明 #

• 如果你需要调整放大阈值，修改MAX_ZOOM数值即可，数值越大放大倍数越高
• 调整ZOOM_SPEED可以改变缩放速度，数值越大缩放越快
• 调整MOVE_SPEED可以改变元素上移的速度，数值越大移动越快
• 过渡效果的时长和曲线可以修改.zoom的transition属性自定义

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