[前端]判定元素是否在可视范围的方法总结

最新推荐文章于 2024-12-14 15:15:45 发布

原创最新推荐文章于 2024-12-14 15:15:45 发布 · 置顶 · 5.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #Jquery #javascript

html 同时被 3 个专栏收录

9 篇文章

订阅专栏

6 篇文章

订阅专栏

Jquery

4 篇文章

订阅专栏

本文总结了前端开发中判断元素是否在可视范围内的多种方法，包括JavaScript原生方法scrollIntoViewIfNeeded，以及利用jQuery获取元素位置和窗口可视范围的技巧。还探讨了document.body.scrollWidth、document.body.scrollHeight等属性，以及jQuery的$(window).width()、$(window).height()用于计算页面和窗口尺寸的方法。此外，还提到了offsetHeight、offsetTop等属性在确定元素相对位置时的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最基本的方法，js 方式document.getElementById.scrollIntoViewIfNeeded

如果是true 则调用基本的document.getElementById.scrollIntoViewIfNeeded();

通过运算基本的加减法

元素的位置jquery方法

$().offset().top

$().offset().left

js 方法比较复杂建议直接用JQuery

窗口可视范围以及窗口的范围(原生js)

//这两个很有用，也是我经常用到的

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight

//
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

jquery

$(window).width()

$(window).height()

这里jQuery没用原生可调用的接口全，建议直接使用原生JS

然后利用上卷的重新设置

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量