获取元素到页面可视区域底部的距离

最新推荐文章于 2023-09-23 14:27:24 发布
最新推荐文章于 2023-09-23 14:27:24 发布
阅读量6.6k 收藏 14
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gz_ok/article/details/106521747
版权

1. 思路分析

  • 当前可视区域的高度 - （元素到文档顶部的距离 - 滚动条滚动的距离）- 元素自身的高度

2. 实现

  • JS：window.innerHeight - (dom.offsetTop - window.pageYOffset) - dom.offsetHeight
    • dom是当前要获取的元素
    • 不兼容IE
  • jquery：$(window).height() - (dom.offset().top - $(document).scrollTop()) - dom.height()
    • dom是当前要获取的元素
  • vue：window.innerHeight - e.target.getBoundingClientRect().y -e.target.getBoundingClientRect().height
    • e是当前元素参数$event
js和vue计算DOM元素距离底部的距离
qq_40364610的博客
09-29 9586
js 参考地址 当前元素与底部的距离 = 可视区窗口高度 + 文档滚动高度 - 当前元素与页面顶部距离 - 当前元素高度 vue: window.innerHeight - e.target.getBoundingClientRect().y -e.target.getBoundingClientRect().height e是当前元素参数$event 参考地址 ...
获取当前元素到页面底部的距离及其他获取距离问题
热门推荐
南极修炼千年的大冰块
11-20 1万+
在我们进行懒加载的逻辑时，经常会遇到各种获取距离问题，比如获取当前元素到页面底部的距离，获取文档网页底部到可视区窗口距离，获取… 大脑想象图形化比较困难的同学就会感觉很绕很麻烦，其实我们只需要获取到这五个值，就可以当前页面中存在的各种距离了 我特意做了一张图： 例如： 文档底部与可视区窗口底部的距离 = 文档总高度 - 文档滚动高度 - 可视区窗口高度 当前元素与底部的距离 = 文档总高度 - ...
javascript获取元素离文档各边距离的方法
10-24
主要介绍了javascript获取元素离文档各边距离的方法,以一个自定义函数形式分析了javascript针对文档各边距离的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery获取元素距离页面底部的距离，大于0时变为固定定位
qq_44657868的博客
01-30 3298
有时候由于页面东西太少，导致底部的元素自动浮上来，导致底部留有一大片空白，影响美观。 js中只能获取元素距离顶部top跟距离左边left的距离。响应获得元素距离底部的距离，则：使用浏览器可视区域的高度 - 元素距离顶部的距离 = 元素距离底部的距离 <div class="bottom">我的页面最底部元素</div> <script> // 获取元素距离顶部的距离跟可视区域的高度 var b_top = $('.bottom').offset().top; var
获取div元素距离可视窗口底部的距离
Cool_so_cool的博客
07-13 4335
当前可视区域的高度 - （元素到文档顶部的距离 - 滚动条滚动的距离）- 元素自身的高度 dom是当前要获取的元素 window.innerHeight - (dom.offsetTop - window.pageYOffset) - dom.offsetHeight
js获取距离
weixin_45802907的博客
02-19 1461
offsetWidth clientWidth scrollWidth的区别
Javascript之获取元素距离页面的top、left、right、bottom
chelen_jak的专栏
12-18 4008
原文出处：https://blog.csdn.net/a271720559/article/details/81278345 我们在做网页是有时会需要用到绝对定位这时需要判定元素离页面的距离。今天我们来看看怎么获取元素距离页面的top、left、right、bottom。 代码： var el = document.getElementById('list-content'); // 元素...
jquery获取元素到屏幕四周可视距离的方法
10-18
如果我们要计算元素距离屏幕可视区域的顶部或底部的距离，可以结合使用这些方法。例如，如果我们想获取`div`元素距离屏幕顶部的距离，可以使用`$("div").offset().top - $(document).scrollTop()`。这将得到元素顶部...
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
11-20
以上就是 Vue.js 中实现滚动判断的几个关键知识点，包括判断是否滚动到底部、检测滚动方向、滚动节流以及获取滚动可视区域内的 DOM 元素。这些技巧能够帮助你创建更流畅、更高效的滚动交互体验。
js 原生判断内容区域是否滚动到底部的实例代码
10-19
在这个示例中，我们监听`textarea`的`scroll`事件，当用户滚动到文本区域底部时，会移除“同意”选项的`disabled`属性，允许用户勾选。这个例子展示了如何将理论知识应用到实际场景中，帮助用户确认他们已经阅读并...
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
01-21
this.$refs[‘通过设置ref获取到的dom元素’].getBoundingClientRect(); //示例: 获取元素距离顶部的距离 this.$refs.journalUpward.getBoundingClientRect().top 以上这篇vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
JS实现判断滚动条滚到页面底部并执行事件的方法
10-25
clientHeight是元素的内部高度，不包括边框、滚动条以及外边距，是元素可视区域的高度。offsetHeight是一个元素内容的高度，包括元素的垂直内边距和边框，但不包括水平滚动条或外边距。scrollTop是元素内容垂直滚动...
jQuery判断网页是否已经滚动到浏览器底部的实现方法
10-19
判断用户是否滚动到底部的基本思路是：当浏览器可视区域的高度加上滚动条的垂直位置（即用户已经滚动的距离）等于或大于页面文档总高度时，说明用户已经到达底部。以下是实现这一功能的基本代码： ```javascript $...
html浮动距离,【浮动导航栏的定位】JS监听动态页面元素距离底部距离，并修改定位样式...
weixin_28759537的博客
06-14 261
需求：一个定位position:fixed;的菜单栏，移动到底部时依然存在，影响页面美观，我们希望当滚轮移到页面末尾时菜单栏更换为绝对定位。解决：JS没有直接获取元素距离页面底部距离的函数，因此可利用全文高度-当前高度取得差值来间接判断。demowindow.onscroll = function(){var t2 = document.body.scrollHeight;var t1 = doc...
vue滚动条事件（获取滚动条距离底部距离）
weixin_30532987的博客
06-05 6646
网上大部分vue的滚动条操作是监听dom实现，我是用@scroll实现 首先有滚动条的div一定要设固定高度，然后overflow:auto;出现滚动条 passive是使滚动更加流畅，减少卡顿 <div @scroll.passive="getScroll($event)" style="height:100px;overflow:auto;"> &lt...
javascript每日进阶--获取元素在浏览器的各种距离
图解前端的博客
05-15 2693
这篇文章用来记录获取元素距离浏览器的各种距离 用途 如果你想要获取页面中某个元素距离页面底部的距离时，可以使用下面三个方法。 //取窗口可视范围的高度 export const getClientHeight = function() { var clientHeight=0; if(document.body.clientHeight&amp;amp;...
vue根据满屏设计图页面元素高度来计算接触页面底部位置的元素高度
qq_42289686的博客
09-29 1130
this.screenWidth = document.body.clientWidth; this.screenHeight = window.innerHeight this.table_box2_height = window.innerHeight - 409 - 38 - 62 this.tab_box2_height = window.innerHeight - 614 - 30 wi...
如何使用JavaScript实用程序精确测量网页元素之间的间距：完整指南与代码示例
qq_38334677的博客
09-23 489
使用JavaScript来测量网页上元素之间的间距是一个非常有用的技巧，尤其是在需要确保设计的准确性和一致性时。通过上述方法，我们不仅可以准确地测量间距，还可以直观地在页面上展示测量结果，从而提高我们的工作效率和准确性。此外，通过扩展我们的实用程序，我们可以轻松地测量多个元素之间的间距，从而提高我们的工作效率。为了确保我们的测量结果在任何缩放级别下都是准确的，我们需要考虑浏览器的缩放因子。为了使测量过程更加交互式，我们可以创建一个简单的工具，允许用户点击页面上的两个元素来测量它们之间的间距。
cmd脚本-bat批处理-删除右键“新建”菜单项目.zip
最新发布
05-20
cmd脚本-bat批处理-删除右键“新建”菜单项目.zip
微信小程序如何设置页面滚动到屏幕底部?
03-08
### 微信小程序页面滚动到底部的实现方法 在微信小程序中，可以通过监听 `onPageScroll` 事件来检测页面是否已经滚动到了底部。具体来说，在页面配置文件中的 JavaScript 部分加入此函数，并设定逻辑判断当前滚动位置是否接近或达到了页面的最大高度。 当页面发生滚动行为时触发该回调函数，参数为对象 res，其中包含了scrollTop 属性表示页面垂直方向已滚动的距离；通过比较 scrollTop 和整个页面的高度减去窗口可视区域高度之差即可得知是否到达底部[^2]。 下面是一个简单的例子展示如何利用这些特性： ```javascript // pages/index.js Page({ data: { isBottom: false, // 是否触底标志位 }, onLoad() {}, onReady() {}, onPageScroll(e) { const query = wx.createSelectorQuery(); query.select('.container').boundingClientRect((rect) => { if (e.scrollTop >= rect.bottom - window.innerHeight && !this.data.isBottom){ this.setData({isBottom: true}); console.log('页面滚动到底部'); // 这里可以放置加载更多数据或其他操作 } else if (e.scrollTop < rect.bottom - window.innerHeight && this.data.isBottom){ this.setData({isBottom: false}); } }).exec(); }, }) ``` 上述代码片段展示了如何使用 `wx.createSelectorQuery()` 方法获取容器节点的信息并据此判定是否达到页面底部。一旦确认抵达，则更新组件状态以执行相应动作，比如提示用户或者发起新的请求加载额外的数据项等。 #### 关于页面结构部分，HTML 文件应包含如下内容以便正确选取目标元素用于计算： ```html <!--pages/index.wxml--> <view class="container"> <!-- 内容 --> </view> <button bindtap="toTop">返回顶部</button> <!-- 可选：提供一个返回顶部按钮 --> ``` CSS 中可适当调整 `.container` 的样式使其适应实际需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值