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

最新推荐文章于 2023-09-23 14:27:24 发布
最新推荐文章于 2023-09-23 14:27:24 发布
阅读量5.6k 收藏 13
点赞数 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
人分两类、迷人乏味
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript之获取元素距离页面的top、left、right、bottom
chelen_jak的专栏
12-18 3824
原文出处：https://blog.csdn.net/a271720559/article/details/81278345 我们在做网页是有时会需要用到绝对定位这时需要判定元素离页面的距离。今天我们来看看怎么获取元素距离页面的top、left、right、bottom。 代码： var el = document.getElementById('list-content'); // 元素...
javascript获取元素离文档各边距离的方法
10-24
主要介绍了javascript获取元素离文档各边距离的方法,以一个自定义函数形式分析了javascript针对文档各边距离的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
javascript获取元素在浏览器中工作区域的左、右、上、下距离，或带滚动条的元素在页面中的大小
cdcdhj的博客
09-16 796
/html代码部分。
js 判断div距离浏览器顶部或者底部的距离
学习博客 记录技术文档及心得体会
08-05 1250
【代码】js 判断div距离浏览器顶部或者底部的距离。
js和vue计算DOM元素距离底部的距离
qq_40364610的博客
09-29 9028
js 参考地址 当前元素与底部的距离 = 可视区窗口高度 + 文档滚动高度 - 当前元素与页面顶部距离 - 当前元素高度 vue: window.innerHeight - e.target.getBoundingClientRect().y -e.target.getBoundingClientRect().height e是当前元素参数$event 参考地址 ...
获取当前元素到页面底部的距离及其他获取距离问题
热门推荐
南极修炼千年的大冰块
11-20 1万+
在我们进行懒加载的逻辑时，经常会遇到各种获取距离问题，比如获取当前元素到页面底部的距离，获取文档网页底部到可视区窗口距离，获取… 大脑想象图形化比较困难的同学就会感觉很绕很麻烦，其实我们只需要获取到这五个值，就可以当前页面中存在的各种距离了 我特意做了一张图： 例如： 文档底部与可视区窗口底部的距离 = 文档总高度 - 文档滚动高度 - 可视区窗口高度 当前元素与底部的距离 = 文档总高度 - ...
jQuery获取元素距离页面底部的距离，大于0时变为固定定位
qq_44657868的博客
01-30 3131
有时候由于页面东西太少，导致底部的元素自动浮上来，导致底部留有一大片空白，影响美观。 js中只能获取元素距离顶部top跟距离左边left的距离。响应获得元素距离底部的距离，则：使用浏览器可视区域的高度 - 元素距离顶部的距离 = 元素距离底部的距离 <div class="bottom">我的页面最底部元素</div> <script> // 获取元素距离顶部的距离跟可视区域的高度 var b_top = $('.bottom').offset().top; var
js获取距离
weixin_45802907的博客
02-19 953
offsetWidth clientWidth scrollWidth的区别
html浮动距离,【浮动导航栏的定位】JS监听动态页面元素距离底部距离，并修改定位样式...
weixin_28759537的博客
06-14 211
需求：一个定位position:fixed;的菜单栏，移动到底部时依然存在，影响页面美观，我们希望当滚轮移到页面末尾时菜单栏更换为绝对定位。解决：JS没有直接获取元素距离页面底部距离的函数，因此可利用全文高度-当前高度取得差值来间接判断。demowindow.onscroll = function(){var t2 = document.body.scrollHeight;var t1 = doc...
js 原生判断内容区域是否滚动到底部的实例代码
10-19
在这个示例中，我们监听`textarea`的`scroll`事件，当用户滚动到文本区域底部时，会移除“同意”选项的`disabled`属性，允许用户勾选。这个例子展示了如何将理论知识应用到实际场景中，帮助用户确认他们已经阅读并...
jQuery判断网页是否已经滚动到浏览器底部的实现方法
10-19
判断用户是否滚动到底部的基本思路是：当浏览器可视区域的高度加上滚动条的垂直位置（即用户已经滚动的距离）等于或大于页面文档总高度时，说明用户已经到达底部。以下是实现这一功能的基本代码： ```javascript $...
jQuery实现判断滚动条到底部
10-24
在实际应用中，你可以根据需求调整这段代码，例如，为了避免过于频繁的触发，可以在距离底部一定距离时就开始加载更多内容，而不是等到完全到底部。这通常通过设置一个阈值来实现，例如： ```javascript $(window)....
判断div滑动到底部的scroll实例代码
08-28
如果可视区域的高度（`h`）加上滚动条的位置（`st`）大于或等于div的总高度（`sh`），那么就说明用户已经滚动到了div的底部。 在满足条件的情况下，我们可以执行相应的操作，例如弹出提示或者加载更多内容。在这个...
当滚动条滚动到页面底部自动加载增加内容的js代码
10-25
- **getClientHeight()**：返回浏览器窗口可视区域的高度，即用户当前能看到的页面部分。 - **getScrollHeight()**：返回整个文档的高度，包括用户当前看不到的部分。 3. **判断底部到达**：当`getScrollTop()`...
javascript每日进阶--获取元素在浏览器的各种距离
图解前端的博客
05-15 2561
这篇文章用来记录获取元素距离浏览器的各种距离 用途 如果你想要获取页面中某个元素距离页面底部的距离时，可以使用下面三个方法。 //取窗口可视范围的高度 export const getClientHeight = function() { var clientHeight=0; if(document.body.clientHeight&amp;amp;...
如何使用JavaScript实用程序精确测量网页元素之间的间距：完整指南与代码示例
最新发布
qq_38334677的博客
09-23 357
使用JavaScript来测量网页上元素之间的间距是一个非常有用的技巧，尤其是在需要确保设计的准确性和一致性时。通过上述方法，我们不仅可以准确地测量间距，还可以直观地在页面上展示测量结果，从而提高我们的工作效率和准确性。此外，通过扩展我们的实用程序，我们可以轻松地测量多个元素之间的间距，从而提高我们的工作效率。为了确保我们的测量结果在任何缩放级别下都是准确的，我们需要考虑浏览器的缩放因子。为了使测量过程更加交互式，我们可以创建一个简单的工具，允许用户点击页面上的两个元素来测量它们之间的间距。
【浮动导航栏的定位】JS监听动态页面元素距离底部距离，并修改定位样式
icebns的博客
09-28 8081
需求：一个定位position:fixed;的菜单栏，移动到底部时依然存在，影响页面美观，我们希望当滚轮移到页面末尾时菜单栏更换为绝对定位。 解决：JS没有直接获取元素距离页面底部距离的函数，因此可利用全文高度-当前高度取得差值来间接判断。 <!DOCTYPE html> <html> <head> <meta charset="...
js设置元素顶部到可视窗口顶部距离
05-17
可以使用JavaScript中的`offsetTop`属性来获取元素顶部到其offsetParent元素顶部的距离，再结合`scrollTop`属性获取可视窗口顶部到文档顶部的距离，从而计算出元素顶部到可视窗口顶部的距离。 以下是一个示例代码： ```javascript // 获取元素 const element = document.getElementById('my-element'); // 计算元素顶部到文档顶部的距离 const topOffset = element.offsetTop; // 计算可视窗口顶部到文档顶部的距离 const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const topRelativeToViewport = topOffset - scrollTop; console.log(topRelativeToViewport); // 输出元素顶部到可视窗口顶部的距离 ``` 在上面的代码中，`my-element`是要获取距离的元素的ID。然后，我们使用`offsetTop`属性获取元素顶部到其offsetParent元素顶部的距离，并使用`scrollTop`属性获取可视窗口顶部到文档顶部的距离。最后，计算出元素顶部到可视窗口顶部的距离，并将其打印到控制台上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值