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获取元素到可视区的距离内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
序列化是将对象状态转换为可保持或可传输的格式的过程。与序列化相对的是反序列化，它将流转换为对象。这两个过程结合起来，可以轻松地存储和传输数据2013-07-07
这篇文章主要介绍了js实现支持手机滑动切换的轮播图片效果,实例分析了javascript实现图片切换的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JS简单判断是否在微信浏览器打开的方法,结合实例形式分析了javascript针对浏览器相关信息的获取与判定操作技巧,需要的朋友可以参考下2019-01-01
保证JavaScript和Asp、Php等后端程序间传值编码统一
在WEB开发过程中，前后端要求数据编码一致的处理是经常会碰到的！2009-04-04
这篇文章主要为大家详细介绍了bootstrap与pagehelper实现分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
javascript简写常用的12个技巧（可以大大减少你的js代码量）
这篇文章主要跟大家分享了javascript简写常用的12个技巧，通过这12个技巧可以大大减少你的js代码量，看懂一种是入门，全懂就是大神，你能知道几个呢？需要的朋友们下面跟着小编来一起学习学习下吧。2017-08-08
下面小编就为大家带来一篇页面向下滚动ajax获取数据的实现方法(兼容手机)。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
本篇文章主要是对javascript在Google IE中的调试技巧进行了介绍，需要的朋友可以过来参考下2016-11-11
当大家使用window.onload执行一个函数时，必须要等到页面上的图片等信息全部加载完毕之后才执行的。但很多时候图片的数量比较多，所以需要很多时间下载。更令人尴尬的是，当网页文档（或者说Dom）已经加载完毕,而图片尚未加载完毕，很多用户已经开始浏览网页，但这时很多由window.onload所触发的函数不能执行，这就导致一部分功能不能完美地给用户使用，更严重的是会给用户留下不好的印象！2008-05-05
javascript设计模式 – 工厂模式原理与应用实例分析
这篇文章主要介绍了javascript设计模式 – 工厂模式,结合实例形式分析了javascript工厂模式基本概念、原理、定义、应用场景及相关操作注意事项,需要的朋友可以参考下2020-04-04
最新评论