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

本文介绍了如何使用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';


<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、付费专栏及课程。

余额充值