js获取元素到可视区的距离、浏览器窗口滚动距离及元素距离浏览器顶部距离
更新时间：2023年11月16日 15:01:29 作者：godlike-icy
这篇文章主要给大家介绍了关于js获取元素到可视区的距离、浏览器窗口滚动距离及元素距离浏览器顶部距离的相关资料,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
1. js获取元素距离可视区的各种距离
const box=document.getElementById('box') // 获取元素
const ct = box.getBoundingClientRect().top // 元素上边距离页面可视区上边的距离
const cr = box.getBoundingClientRect().right // 元素右边距离页面可视区左边的距离
const cb = box.getBoundingClientRect().bottom // 元素下边距离页面可视区上边的距离
const cl = box.getBoundingClientRect().left // 元素左边距离页面可视区左边的距离2. js获取浏览器窗口滚动距离
// 浏览器滚动距离 const dt = document.documentElement.scrollTop || document.body.scrollTop;
3. js获取元素实际距离页面距离（包括滚动距离）
（1）.如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。
（2）.如果父辈元素中没有定位元素，那么就返回相对于body边缘距离。
有些限制，对于滚动父元素设置为scroll：hidden时不生效。
const box = document.getElementById('box')
// 元素实际距离页面顶部距离
const bt = box.offsetTop;
// 元素实际距离页面左边距离
const bl = box.offsetLeft;
// 元素实际距离页面右边距离
const br = box.offsetRight;
// 元素实际距离页面底部距离
const bb = box.offsetBottom;附：获取元素到顶部或左部的距离
document.querySelector(selectDom).offsetTop：获取元素到顶部的距离
document.querySelector(selectDom).offsetLeft：获取元素到左边的距离
offsetTop：元素到offsetParent顶部的距离
offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。如下图所示：获取child的offsetTop，图1的offsetParent为father，图2的offsetParent为body。
注意：只有元素show（渲染完成）才会计算入offsetTop，若是中间有元素数据需要异步获取，会导致最终获取的offsetTop值偏小
总结
到此这篇关于js获取元素到可视区的距离、浏览器窗口滚动距离及元素距离浏览器顶部距离的文章就介绍到这了,更多相关js获取元素到可视区的距离内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
火狐浏览器(firefox)下获得Event对象以及keyCode
firefox Event对象2008-11-11
但是最近由于开发人手不够,一个人开启全栈,一边写接口一边写页面,刚好项目中有一个需求,所以尝试使用自定义组件开发这块,下面这篇文章主要给大家介绍了关于微信小程序学习之常用的视图组件的相关资料,需要的朋友可以参考下2022-11-11
这篇文章介绍了js实现日期灵活格式化的小例子，有需要的朋友可以参考一下2013-07-07
一文详细分析前端请求中的“Unsupported Media Type”问题
在Web开发中,前后端交互频繁遇到HTTP状态码415错误,这表明服务器无法处理因Content-Type不匹配的请求,常见于POST或PUT请求,必须确保请求头中的Content-Type与服务器期望的一致,跨域请求中,需要的朋友可以参考下2024-10-10
Javascript实现Array和String互转换的方法
这篇文章主要介绍了Javascript实现Array和String互转换的方法,涉及JavaScript中toString方法与split方法的使用技巧,需要的朋友可以参考下2015-12-12
$()JS小技巧...2007-07-07
下面小编就为大家带来一篇JavaScript 基础表单验证示例(纯Js实现)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
D3是目前最流行的JavaScript可视化图表库之一，D3的图表类型非常丰富，并且支持SVG格式，因此应用十分广泛，也有很多图表插件基于D3开发，比如MetricsGraphics.js，在D3上构建的数据图表非常强大。2017-08-08
这篇文章主要为大家详细介绍了BootstrapValidator实现表单验证功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
在JavaScript开发中,了解和判断变量的数据类型是编写健壮代码的基础,变量的类型可以在运行时改变,这为开发者带来了灵活性的同时也增加了复杂性,本文将深入探讨几种常见的判断变量类型的技巧,并结合实际案例进行分析,需要的朋友可以参考下2024-12-12
最新评论