前端教学5:视口 vs 文档 —— 滚动改变不了视口大小-北京尧图网络

!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title案例四视口 vs 文档 —— 滚动改变不了窗户大小/title style /* 教学要点视口窗户可见区域文档窗外风景可滚动范围 1. window.innerWidth / innerHeight → 视口尺寸媒体查询看的就是它 2. document.documentElement.clientWidth → 视口宽度不含滚动条 3. 两者之差滚动条宽度Windows 上约 17px 4. document.documentElement.scrollHeight → 文档总高度可滚动范围 5. 滚动只改变 scrollY风景的位置永远不改变视口尺寸 6. 100vh 视口高度不是文档高度演示方法滚动页面 → 看顶部数据板视口三项纹丝不动只有滚动三项在变缩放窗口 → 视口三项才会变。移动端注意地址栏收起/展开会改变 innerHeight属正常现象 */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --ink: #111; --ink-2: #777; --line: #e5e5e5; --accent: #2b6cff; /* 蓝色与视口有关的量 */ --accent-2: #ff4d00; /* 橙色与滚动有关的量 */ } body { font-family: PingFang SC, Microsoft YaHei, Helvetica Neue, sans-serif; color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; /* ★ 用文档总高远大于视口才能演示滚动 */ } /* ---------- 顶部数据板固定悬浮滚动时始终可见 ---------- */ .hud { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; backdrop-filter: blur(6px); } .hud .chip { display: flex; flex-direction: column; min-width: 88px; } .hud .chip b { font-size: 16px; font-variant-numeric: tabular-nums; /* 数字等宽跳动时不抖 */ font-weight: 600; } .hud .chip span { color: var(--ink-2); } .hud .v b { color: var(--accent); } /* 蓝色视口量 */ .hud .s b { color: var(--accent-2); } /* 橙色滚动量 */ /* 滚动进度条贴在数据板下沿 */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 101; background: transparent; } .progress i { display: block; height: 100%; width: 0; background: var(--accent-2); } main { padding-top: 96px; } /* 给固定数据板让位 */ section { padding: 0 24px; max-width: 900px; margin: 0 auto; } /* ---------- 说明区 ---------- */ .intro { padding-top: 48px; } .intro h1 { font-size: 32px; font-weight: 700; line-height: 1.3; margin-bottom: 16px; } .intro p { font-size: 16px; color: #444; max-width: 38em; margin-bottom: 1em; } .intro code { font-family: Consolas, Monaco, monospace; font-size: 14px; background: #f4f4f4; border-radius: 4px; padding: 2px 6px; } .intro .console { background: #f7f7f7; border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px; margin: 24px 0 48px; font-family: Consolas, Monaco, monospace; font-size: 14px; line-height: 2; } .intro .console .c1 { color: var(--accent); } .intro .console .c2 { color: var(--accent-2); } /* ---------- 四个满屏区块制造可滚动距离 ---------- */ .screen { max-width: none; min-height: 100vh; /* 每屏正好一个视口高 */ display: flex; flex-direction: column; justify-content: center; padding: 0 48px; border-bottom: 1px dashed var(--line); transition: background .3s; } .screen:nth-child(odd) { background: #fafafa; } .screen:nth-child(even) { background: #fff; } /* 当前所在屏高亮由 JS 切换 */ .screen.active { box-shadow: inset 4px 0 0 var(--accent); } .screen .no { font-size: 15px; letter-spacing: 4px; color: var(--ink-2); margin-bottom: 8px; } .screen h2 { font-size: 36px; font-weight: 700; line-height: 1.2; max-width: 14em; } .screen p { margin-top: 12px; color: #555; max-width: 34em; font-size: 15px; } /* ---------- 100vh 演示盒 ---------- */ .vh-box { max-width: 900px; margin: 96px auto; height: 100vh; /* ★ 高度100vh等于视口高度 */ border: 3px dashed var(--accent); border-radius: 12px; display: flex; flex-direction: column; justify-content: center; padding: 48px; } .vh-box h2 { font-size: 28px; margin-bottom: 12px; } .vh-box p { color: #555; max-width: 34em; } /* ---------- 底部标记 ---------- */ .bottom-mark { max-width: 900px; margin: 0 auto; padding: 64px 24px 120px; text-align: center; } .bottom-mark .flag { display: inline-block; font-size: 14px; letter-spacing: 2px; color: var(--accent-2); border: 1px solid var(--accent-2); border-radius: 999px; padding: 8px 24px; margin-bottom: 16px; opacity: .35; /* 滚到底部才点亮JS 控制 */ transition: opacity .4s; } .bottom-mark .flag.on { opacity: 1; } .bottom-mark p { color: var(--ink-2); font-size: 14px; } .bottom-mark .formula { font-family: Consolas, Monaco, monospace; font-size: 15px; color: var(--ink); margin-top: 8px; } /* ---------- 右侧文档全景图迷你地图 ---------- */ .minimap { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); width: 10px; height: 40vh; /* 迷你地图代表整个文档 */ background: #eee; border-radius: 5px; z-index: 100; } .minimap i { position: absolute; left: 0; width: 100%; background: var(--accent); /* 蓝色窗口视口在文档中的位置 */ border-radius: 5px; opacity: .85; } .minimap-label { position: fixed; right: 38px; top: calc(50% 20vh 12px); transform: translateY(-100%); font-size: 11px; color: var(--ink-2); writing-mode: vertical-rl; letter-spacing: 2px; z-index: 100; } media (max-width: 900px) { .minimap, .minimap-label { display: none; } .screen { padding: 0 24px; } .screen h2 { font-size: 28px; } } /style /head body !-- 滚动进度条 -- div classprogressi idbar/i/div !-- 实时数据板 -- div classhud div classchip vb idm-vw–/bspan视口宽度 innerWidth/span/div div classchip vb idm-cw–/bspan客户区宽度(不含滚动条)/span/div div classchip vb idm-sbw–/bspan滚动条宽度二者之差/span/div div classchip vb idm-vh–/bspan视口高度 innerHeight/span/div div classchip sb idm-sh–/bspan文档总高 scrollHeight/span/div div classchip sb idm-sy–/bspan已滚动 scrollY/span/div div classchip sb idm-rem–/bspan剩余可滚动/span/div div classchipb idm-pg–/bspan滚动进度 %/span/div div classchipb idm-sc–/bspan当前所在屏/span/div /div main section classintro h1窗户与风景视口 ≠ 文档/h1 p这个页面很长足够你滚动四屏多。请盯着顶部数据板b stylecolor:var(--accent)蓝色数字是窗户视口/bb stylecolor:var(--accent-2)橙色数字是风景的位置滚动状态/b。/p pb滚动页面/b只有橙色数字在变视口尺寸纹丝不动 —— 媒体查询判断的正是那三个蓝色量所以滚多远永远不影响 codemedia (max-width: 768px)/code 的结果。/p pb缩放浏览器窗口/b这次蓝色数字变了 —— 视口尺寸只有窗口变化时才会变。/p div classconsole span classc1window.innerWidth / innerHeight/spannbsp;nbsp;// 视口尺寸媒体查询看的就是它br span classc2document.documentElement.scrollHeight/spannbsp;nbsp;// 文档总高度可滚动范围br span stylecolor:#999document.documentElement.clientWidth/spannbsp;nbsp;// 不含滚动条的视口宽度与 innerWidth 之差滚动条宽度 /div /section section classscreen ids1 div classnoSCREEN 1 / 4/div h2第 1 屏此刻你看到的就是视口的全部/h2 p往右看那条竖直的迷你地图蓝色滑块代表视口它此刻贴着文档顶端。滚动时移动的是滑块风景位置而不是地图本身文档。/p /section section classscreen ids2 div classnoSCREEN 2 / 4/div h2第 2 屏已滚过一整屏视口还是原来的大小/h2 p回看顶部数据板innerWidth / innerHeight 与第 1 屏完全相同。变化的只有 scrollY —— 它记录的是风景被窗框移过了多远。/p /section section classscreen ids3 div classnoSCREEN 3 / 4/div h2第 3 屏100vh 也只是窗户的高度/h2 p页面再往下的虚线盒子 CSS 高度是 100vh —— 它跟着窗口高度走而不是跟着文档总高走。窗口多高它就多高。/p /section section classscreen ids4 div classnoSCREEN 4 / 4/div h2第 4 屏快到头了/h2 p注意剩余可滚动这个数字在变小。当它变成 0 时页脚的橙色徽章会点亮并且满足等式scrollY innerHeight scrollHeight。/p /section div classvh-box h2这个盒子height: 100vh/h2 p它的高度永远等于b stylecolor:var(--accent)视口高度/b和文档总高度无关。试着把浏览器窗口拉高/压矮再回来量它 —— 它始终和窗口一样高。/p /div div classbottom-mark span classflag idflag已到达文档底部/span p此刻恒等式成立/p p classformula idformulascrollY innerHeight scrollHeight/p /div /main !-- 文档全景迷你地图蓝窗视口灰条整个文档 -- div classminimap idmapi idmapWin/i/div span classminimap-label文档全景/span script const $ id document.getElementById(id); const screens document.querySelectorAll(.screen); function update() { const vw window.innerWidth; // 视口宽度含滚动条 const vh window.innerHeight; // 视口高度 const cw document.documentElement.clientWidth; // 视口宽度不含滚动条 const sh document.documentElement.scrollHeight; // 文档总高度 const sy window.scrollY; // 已滚动距离 const rem Math.max(0, sh - vh - sy); // 剩余可滚动 const max Math.max(1, sh - vh); // 最大可滚动范围 const pct (sy / max * 100).toFixed(1); // 数据板 $(m-vw).textContent vw px; $(m-cw).textContent cw px; $(m-sbw).textContent (vw - cw) px; // Windows 上约 17px $(m-vh).textContent vh px; $(m-sh).textContent sh px; $(m-sy).textContent sy px; $(m-rem).textContent rem px; $(m-pg).textContent pct %; // 当前所在屏取视口中线落在哪个区块内 let current –; screens.forEach(s { const r s.getBoundingClientRect(); const hit r.top vh / 2 r.bottom vh / 2; s.classList.toggle(active, hit); if (hit) current s.id.replace(s, 第 ) 屏; }); $(m-sc).textContent current; // 进度条底部徽章等式实况 $(bar).style.width pct %; $(flag).classList.toggle(on, rem 0); $(formula).textContent sy vh sh (rem 0 ? ✓ : ); // 迷你地图蓝窗高度/位置视口占文档的比例 const win $(mapWin); win.style.height (vh / sh * 100) %; win.style.top (sy / sh * 100) %; } window.addEventListener(scroll, update, { passive: true }); window.addEventListener(resize, update); update(); /script /body /html

前端教学5:视口 vs 文档 —— 滚动改变不了视口大小

相关推荐

微信小程序学习笔记｜案例 3.10 文件引用 include 标签

和小马一起学Python（五）——字符串编码转换、字符串运算符、字符串常见内建函数

5个信号识别垃圾账号：anti-slop用户检查如何过滤AI slop贡献者

更多资讯

多模态大模型中的System 2认知架构与工程实践

AI驱动学术写作：智能文献管理6大核心技术解析

C语言插入排序算法：从考古到现代化修复

从90年代C语言插入排序代码看算法优化与编程规范演进

多模态大模型中的System 2推理机制与实现

2026年easyread阅读工具深度解析：正文提取与本地排版的生存逻辑

今日更新

基于YOLOv11的石油泄漏智能检测系统开发实践

AI行业变局：合规、Mod化与上下文管理的实战启示

计算机视觉与AI原生应用融合的技术实践

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？