获取页面、可视区域、容器本身高度宽度

最新推荐文章于 2025-06-27 14:35:07 发布
最新推荐文章于 2025-06-27 14:35:07 发布
阅读量690 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37467814/article/details/62416591
本文介绍了如何使用JavaScript获取网页的各种尺寸，包括页面高度宽度、可视区域尺寸以及元素的实际尺寸，并详细解释了如何使元素在页面中居中显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1,获取页面的高度宽度
var sHeight=document.documentElement.scrollHeight;
var sWidth=document.documentElement.scrollWidth;
2，获取可视区域的高度宽度
var cHeight=document.documentElement.clientHeight;
var cWidth=document.documentElement.clientWidth;
3，一般情况下可视区的宽度与页面的宽度是相等的即
sWidth==cWidth;
4，容器本身的高度宽度
var offHeight=oLogin.offsetHeight;
var offWidth=oLogin.offsetWidth;
5，固定定位容器水平垂直居中：top=可视区的高度减容器高度除以2、left=可视区宽度减容器宽度除以2
oLogin.style.top=(cHeight-offHeight)/2+'px';
oLogin.style.left=(sWidth-offWidth)/2+'px';


js获取浏览器中相关容器的高度
Prince_fmx的博客
06-17 462
js获取浏览器中相关容器的高度 document.body.clientWidth || document.documentElement.clientWidth //网页可见区域宽 document.body.clientHeight || document.documentElement.clientWidth //网页可见区域高 document.body.offsetWidth //网...
uni-app(vue3)动态获取swiper的区域高度以及通过scroll-view实现区域滚动和scroll-view的置顶功能
qq_39691676的博客
04-28 930
计算方式:swiper高度 = page高度 - tabs高度 - search高度。
获取浏览器可视区域宽度和高度 兼容主流浏览器
chen_wen_xian的专栏
08-29 954
function fnGetWidthHeight() { var viewportwidth; var viewportheight; // 支持(mozilla/netscape/opera/chrome/IE7) if (typeof window.innerWidth != 'undefine
react监听容器宽度变化，动态计算ant-design table列宽
u010234868的专栏
06-27 236
摘要：本文介绍了在Ant Design的Table组件中实现动态列宽分配的方法。通过监听容器宽度变化（使用ResizeObserver或resize事件），动态计算4列宽度：前两列各占30%，第三列占20%（均为动态等宽），第四列固定200px。关键点在于确保每列设置像素级width值以保证ellipsis效果。实现步骤包括：1) 监听容器宽度并重新计算列宽；2) 按比例分配列宽（取整数像素值）；3) 在columns配置中应用计算好的宽度值。代码示例展示了如何使用React Hooks完成这一功能。
小程序--获取容器内各元素宽度之和-坑
liudan123012的博客
12-11 701
已知元素个数和各元素之间的距离（单位：rpx），求各元素宽度之和，以获取容器宽度并设置其宽度（单位：rpx）。 思路一：获取各元素宽度+距离（单位：rpx；因此，距离应该是rpx单位值除以2）；累加后得到总的值（单位：px）；this.setData()值=得到的总值（单位：px）* 2 - 最后一个元素的距离（单位：rpx）； 代码： <view class="label-list...
容器高度或者宽度的获取方式
木枫
09-21 3870
为了使表格或者一些数据能能够自适应浏览器的宽度或者高度，就不可避免的要获取浏览器的尺寸 电脑屏幕尺寸的获取方式 window.screen.height //获取电脑屏幕分辨率的高度 window.screen.width //获取电脑屏幕分辨率的宽度 window.screen.availHeight // 获取电脑屏幕的有效高度（例如 出去任务栏，有顶部栏的也会除去） window.scre
获取浏览器窗口的可视区域高度和宽度/滚动条高度
weixin_30568591的博客
01-04 413
jq:获取浏览器窗口的可视区域高度和宽度/滚动条高度 参考文案：JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度 $(window).height(); //浏览器时下窗口可视区域高度 $(document).height(); //浏览器时下窗口文档的高度 $(document.body).height();//浏览器时下窗口文档body的高度 $(document.bo...
可视化信息处理导论期末大作业（美国销售利润相关可视化）
weixin_52424236的博客
07-11 856
实验目的和要求： 1. 掌握Web可视化工具D3.js的安装和配置； 2. 熟练掌握D3.js的可视化编程； 3. 学会使用D3.js针对实际数据完成较完整的可视化作品，并对数据进行可视化分析。
Javascript 高级教程：ECharts 数据可视化应用指南
caifox的博客
05-27 1077
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
微信小程序动态视图宽度和高度调整实战演练：全方位技巧揭秘
本文从基础布局和视图特性出发，系统介绍了动态视图宽度和高度的调整技巧。通过分析响应式布局、flex布局、计算属性以及组件特性等方法，本文详细阐述了如何实现视图尺寸的动态调整。在此基础上，本文进一步通过综合...
【深入探讨】：突破技术限制，4种方法解决iframe子页面元素获取问题
在现代网页设计中，Iframe被广泛用于嵌入第三方内容，但同时带来了子页面元素获取的挑战。本文全面探讨了Iframe子页面元素获取的挑战与限制，并分析了Iframe与跨文档通信的基本原理及其安全实践。通过深入理解Iframe...
浏览器可视区域及容器的宽高
一只卑微的菜狗的博客
10-22 1083
获取浏览器可视区域的宽度高度，容器的宽高
vue页面自适应屏幕宽高_vue组件页面高度根据屏幕大小自适应
weixin_32672471的博客
01-16 3001
网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHeight (包括边线的宽)我们将document.body.clientWidth赋值给data中自定义的变量：data:...
js你真的了解offsetWidth吗
weixin_30578677的博客
07-23 249
offsetWidth是什么？ 答：它可以获取物体宽度的数值 那么就只是这样吗！ html部分 <div id="div1"></div> <style> #div1 { width:200px; height:200px; border:1px solid red; padding:2px; margin:2px; backgroun...
php获取页面的可视内容高度,网页制作技巧:获取页面可视区域的高度_css
weixin_34972980的博客
03-24 327
文章简介：获取页面可视区域高度，获取页面高度，获取滚动条滚动上去的页面高度.function getWH(){ var wh = {}; "Height Width".replace(/[^/s]+/g,function(a){ var b = a.toLowerCase(); wh[b]=window["inner".concat(a)] document.compatMode ==="...
获取浏览器窗口可视区域的高度和宽度
博客of me
08-22 2271
这是浏览器窗口的内部高度，即可视区域的高度，不包括浏览器的工具栏、标签栏等非内容区域的部分。这是最常用的获取窗口可视区域高度的方法。这通常与窗口可视区域的高度相同，但是在一些情况下，可能会受到CSS样式的影响。然而，这种方法在某些浏览器和情况下可能会失效，因为。不可用，这个属性会尝试获取文档的根元素（通常是。: 如果前两种方法都不可用，这个属性会尝试获取。元素可能没有占满整个可视区域。另外，还可以计算对角线长度。解释：（以高度为例）
JS获取浏览器可视区域宽高
qq_2411868438的博客
04-27 5295
写在前面 浏览器可视区域宽高并不就等于浏览器窗口宽高，而是除去顶部标签栏+滚动条(如果有)+控制台(如果有f12打开)之外的尺寸大小 因为比较简单所以直接上代码： let w, h; // 对于ie9以上浏览器（手机浏览器，一直是保持最新内核标准，当然也支持这种方式获取） w = window.innerWidth; h = window.innerHeight // 对于ie9以下 w = document.documentElement.clientWidth; h = do...
js 获取屏幕高度和宽度的几种方式
zmy967131的博客
12-16 2844
js 获取屏幕高度和宽度的几种方式
miniUi常用方法
zidieq的博客
05-13 1413
验证规则 onvalidation="onPhoneValidation" //身份证号验证规则 function onIDCardsValidation(e){ var exp = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; if (e.isValid) { if (!exp.test(e.value)) { e.errorText = "必须输入15~18位数字"; e.isVa
微信小程序 onScroll e.detail 获取不到height
最新发布
08-07
<think>我们正在解决的是：在微信小程序的onScroll事件中，尝试获取e.detail.height失败的问题。 根据微信小程序官方文档，scroll-view组件的scroll事件对象（e）的detail中并没有height属性。因此，用户可能误解了可用的属性。 参考微信小程序官方文档[^1]： scroll事件对象（e）的detail包含以下属性： - scrollLeft: 横向滚动条位置 - scrollTop: 竖向滚动条位置 - scrollHeight: 竖向滚动条高度（即整个滚动区域的高度） - scrollWidth: 横向滚动条宽度（即整个滚动区域的宽度） - deltaX: 横向滚动距离（当滚动是由手势触发时，返回手势滚动的距离） - deltaY: 竖向滚动距离（当滚动是由手势触发时，返回手势滚动的距离） 因此，用户想要获取高度，应该使用`e.detail.scrollHeight`（整个滚动区域的高度）或者`e.detail.scrollTop`（当前滚动位置）等。 但是，用户提到“获取e.detail.height失败”，可能是因为用户误以为存在height属性，或者用户想要获取的是当前滚动视图的高度（可视区域高度）？注意，在事件对象中并没有直接提供可视区域的高度（即scroll-view组件本身的高度）。这个高度通常是在样式里设定的，我们可以通过其他方式获取。 解决方案： 1. 如果用户需要的是整个滚动区域的高度（即内容的总高度），使用`e.detail.scrollHeight`。 2. 如果用户需要的是当前可视区域的高度（即scroll-view组件的高度），则不能在scroll事件中直接获取，但可以通过以下方式： a. 在组件的初始化时（比如onLoad或onReady生命周期中），通过`wx.createSelectorQuery()`获取scroll-view节点的高度，并记录下来。 b. 在scroll事件中，使用之前记录的可视高度。 示例代码： 步骤1：在页面中给scroll-view设置一个id，例如id="myScrollView" 步骤2：在页面onReady中查询节点高度并保存 步骤3：在scroll事件处理函数中使用保存的可视高度 具体代码： ```javascript Page({ data: { scrollHeight: 0, // 用于保存可视高度 }, onReady() { const query = wx.createSelectorQuery().in(this); query.select('#myScrollView').boundingClientRect(res => { if (res) { this.setData({ scrollHeight: res.height }); } }).exec(); }, onScroll(e) { // 在滚动事件中，我们可以获取到滚动位置和整个滚动区域的高度 const scrollTop = e.detail.scrollTop; const scrollHeight = e.detail.scrollHeight; // 整个滚动区域的高度 const windowHeight = this.data.scrollHeight; // 可视高度（之前获取的） // 例如，计算是否滚动到底部 if (scrollTop + windowHeight >= scrollHeight) { console.log('到达底部'); } } }) ``` 在wxml中： ```wxml <scroll-view id="myScrollView" scroll-y style="height: 100vh;" bindscroll="onScroll" > <!-- 内容区域 --> </scroll-view> ``` 注意：如果scroll-view的高度是动态变化的，那么需要在高度变化后重新获取可视高度。 另外，如果用户想要的是每次滚动时当前内容的高度，那么可能是scrollHeight，这个在滚动事件中是有的。 总结： - 整个滚动区域的高度：`e.detail.scrollHeight` - 当前滚动位置：`e.detail.scrollTop` - 可视区域高度：需要预先通过节点查询获取，并保存在data中，然后在滚动事件中使用。 引用说明： 我们参考了微信小程序官方文档中关于scroll-view的事件说明[^1]，以及通过节点查询获取组件高度的方法。 相关问题： 1. 微信小程序中如何监听页面滚动到底部？ 2. scroll-view组件在iOS和安卓上的表现差异有哪些？ 3. 如何动态获取微信小程序中元素的高度？ 4. 微信小程序中scroll-view的scroll-top属性设置无效怎么办？ 5. 微信小程序的scroll-view组件与页面滚动（page-scroll）有何区别？ [^1]: 微信小程序官方文档 - scroll-view组件事件说明</think>在微信小程序中，`onScroll` 事件无法直接获取 `e.detail.height` 是因为该属性在事件对象中并不存在。以下是详细分析和解决方案： ### 问题原因 1. **事件对象属性误解** `scroll-view` 的 `bindscroll` 事件返回的 `e.detail` 对象仅包含以下属性[^1]： ```javascript { scrollLeft, // 横向滚动条位置 scrollTop, // 竖向滚动条位置 scrollHeight,// 滚动区域总高度（关键） scrollWidth, // 滚动区域总宽度 deltaX, // 横向滚动距离 deltaY // 竖向滚动距离 } ``` **不存在 `height` 属性**，这是开发者常见的误解点。 2. **动态高度获取限制** 若需获取滚动容器**当前可视区域高度**（即 `scroll-view` 自身高度），必须通过异步 API 主动查询，无法直接从事件对象获取。 --- ### 解决方案 #### ✅ 正确获取滚动区域总高度（scrollHeight） ```javascript onScroll(e) { // 正确属性是 scrollHeight 而非 height const totalHeight = e.detail.scrollHeight console.log('滚动区域总高度:', totalHeight) } ``` #### ✅ 获取可视区域高度（容器高度） 需使用 `wx.createSelectorQuery()`： ```javascript Page({ data: { containerHeight: 0 }, onReady() { const query = wx.createSelectorQuery().in(this) query.select('#myScrollView').boundingClientRect(res => { this.setData({ containerHeight: res.height }) // 保存可视高度 }).exec() }, onScroll(e) { const { scrollTop, scrollHeight } = e.detail const { containerHeight } = this.data // 计算滚动比例 const scrollRatio = scrollTop / (scrollHeight - containerHeight) console.log('当前滚动进度:', scrollRatio.toFixed(2)) } }) ``` ```wxml <scroll-view id="myScrollView" bindscroll="onScroll" style="height: 100vh" > <!-- 内容区域 --> </scroll-view> ``` #### ✅ 动态高度监听技巧 当内容高度动态变化时（如异步加载数据）： ```javascript // 在数据更新后重新查询高度 this.setData({ list: newData }, () => { wx.createSelectorQuery().select('#content').boundingClientRect(res => { console.log('内容最新高度:', res.height) }).exec() }) ``` --- ### 关键点说明 | 属性 | 获取方式 | 说明 | |---------------|------------------------|--------------------------| | scrollHeight | `e.detail.scrollHeight` | 滚动内容总高度（只读） | | scrollTop | `e.detail.scrollTop` | 当前滚动位置 | | 可视区域高度 | `boundingClientRect()` | 需异步查询 | | 内容高度 | `boundingClientRect()` | 需指定子元素选择器 | --- ### 常见场景应用 #### 1. 触底加载判断 ```javascript onScroll(e) { const { scrollTop, scrollHeight } = e.detail const { containerHeight } = this.data // 滚动到底部（距离底部<50px） if (scrollHeight - scrollTop - containerHeight < 50) { this.loadMoreData() } } ``` #### 2. 滚动进度指示器 ```wxml <!-- 进度条 --> <view class="progress-bar"> <view class="progress" style="width: {{scrollRatio * 100}}%" ></view> </view> ``` #### 3. 吸顶导航实现 ```wxml <scroll-view scroll-y> <!-- 普通内容 --> <view wx:if="{{!isSticky}}">导航栏</view> <!-- 吸顶内容 --> <view class="sticky" wx:else>导航栏</view> </scroll-view> ``` ```javascript onScroll(e) { const isSticky = e.detail.scrollTop > 200 this.setData({ isSticky }) } ``` --- ### 平台注意事项 1. **iOS 特殊处理** 在 iOS 上，`scrollHeight` 可能包含安全区域高度，需额外计算： ```javascript wx.getSystemInfoSync().safeArea.height // 获取安全高度 ``` 2. **安卓兼容性** 安卓部分机型需在 `onReady` 后添加延迟再获取高度： ```javascript setTimeout(() => { /* 查询高度 */ }, 300) ``` > "正确理解 `scroll-view` 事件对象的属性是避免开发陷阱的关键" —— 微信官方文档[^1] 若需实时监听高度变化，建议使用 `IntersectionObserver` API 替代滚动事件检测。 --- ### 相关问题 1. 微信小程序中如何实现精准的触底加载检测？ 2. `scroll-view` 和页面原生滚动有什么区别？ 3. 如何在小程序中实现滚动视差效果？ 4. 微信小程序 `IntersectionObserver` 的使用场景有哪些？ 5. 如何优化小程序长列表滚动性能？ [^1]: 微信官方文档 - scroll-view 组件事件说明 [^2]: 微信小程序性能优化指南 - 滚动容器最佳实践 [^3]: 微信开发者社区 - 滚动高度获取常见问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值