jquery 检查元素是否在浏览器窗口内可见的代码怎么写?

bluesky1年前 ⋅ 1009 阅读

可以使用如下代码检查元素是否在浏览器窗口内可见:


```javascript

function isElementInViewport(elem) {

 var $elem = $(elem);


 // 获取元素在页面上的坐标

 var elemPos = $elem.offset();

 var elemTop = elemPos.top;

 var elemLeft = elemPos.left;


 // 浏览器窗口的大小和滚动条的位置

 var windowHeight = $(window).height();

 var windowWidth = $(window).width();

 var scrollTop = $(window).scrollTop();

 var scrollLeft = $(window).scrollLeft();


 // 元素的大小

 var elemHeight = $elem.outerHeight();

 var elemWidth = $elem.outerWidth();


 // 计算元素的四个角的位置

 var elemBottom = elemTop + elemHeight;

 var elemRight = elemLeft + elemWidth;


 // 判断元素是否在窗口内可见

 var isElementVisible = (elemTop < (scrollTop + windowHeight)) && ((elemBottom - elemHeight) > scrollTop) && (elemLeft < (scrollLeft + windowWidth)) && ((elemRight - elemWidth) > scrollLeft);


 return isElementVisible;

}

```


使用方法:


```javascript

if (isElementInViewport('#element-id')) {

 // 元素在窗口内可见

} else {

 // 元素在窗口外不可见

}

```

全部评论: 0

    相关推荐