首页 > 教程

JQUERY判断一个元素是否在可视区域中

slbcun
2024-03-20
1345 ℃

基本概念：

offsetTop指元素的上外边框至包含元素的上内边框之间的像素距离，其他方向相同

offsetWidth指元素两端算上外边框的宽度，其他方向相同

scrollLeft 和 scrollTop既可以确定当前元素的滚动状态，也可以设置元素的滚动位置

scrollWidth 和 scrollHeight确定元素内容的实际大小

clientWidth元素内容区宽度加上左右内边距宽度，即clientWidth = content + padding

clientHeight元素内容区高度加上上下内边距高度，即clientHeight = content + padding

JQUERY判断一个元素是否在可视区域中

在日常开发中，我们经常需要判断目标元素是否在可视窗口内，从而实现一些常用的功能，如果一个元素在视窗内，那么它一定满足下面四个条件：

top <= 0;

left <= 0;

bottom <= 视窗高度;

right <= 视窗高度。

JQUERY判断一个元素是否在可视区域中

isInViePortOfTwo判断元素是否在可视区域内：

function isInViePortOfTwo(el){
  const viewPortHeight = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
  const viewPortWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth
  const {top,right,bottom,left} = el.getBoundingClientRect();
  return top>=0 && left>=0 && bottom<=viewPortHeight && right<=viewPortWidth
}

页面滚动时添加监听事件:

$(window).on("scroll",()=>{
    $targets.each((index,element)=>{
        if(isInViewPort(element)){
           console.log('元素在页面可视区域内');
        }else{
           console.log('元素不在页面可视区域内');
        }
    })
})

TAG: 程序开发