谷歌浏览器ctrl+滚轮的缩放怎么用代码实现呢

8008 · 发表于 2025-7-9 12:48:08

谷歌浏览器ctrl+滚轮的缩放怎么用代码实现呢,js代码的那种单页面缩放页面一变缩放就没了

afu45 · 发表于 2025-7-9 12:48:09

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ctrl+滚轮缩放示例</title>
</head>
<body>
    <h1>缩放测试页面</h1>
    <p>使用 Ctrl+滚轮进行缩放</p>
    <p>刷新也不影响</p>
    <script>
        // 从localStorage读取缩放级别，如果没有则使用默认值100%
        let zoomLevel = parseFloat(localStorage.getItem('zoomLevel')) || 100;
        
        // 页面加载时应用存储的缩放级别
        document.addEventListener('DOMContentLoaded', function() {
            document.body.style.zoom = `${zoomLevel}%`;
        });
        
        document.addEventListener('wheel', function(e) {
            if (e.ctrlKey) {
                e.preventDefault();
                // 根据滚轮方向调整缩放级别
                zoomLevel += e.deltaY < 0 ? 10 : -10;
                // 设置最小和最大缩放限制
                zoomLevel = Math.min(Math.max(50, zoomLevel), 200);
                // 应用缩放
                document.body.style.zoom = `${zoomLevel}%`;
                // 保存缩放级别到localStorage
                localStorage.setItem('zoomLevel', zoomLevel);
            }
        }, { passive: false });
    </script>
</body>
</html>

Awesome·LYG · 发表于 2025-7-9 15:19:01

那就尝试模拟按键来缩放

		自动登录	找回密码
密码			注册

[已解决] 谷歌浏览器ctrl+滚轮的缩放怎么用代码实现呢

最佳答案

评分

浏览过的版块