Jquery判断页面元素是否在浏览器的可视区域内

在前端开发过程中中,经常会碰到需要判断某个元素是否在浏览器的可视区域内,或者是否已经滚动出了可视区域，今天主要来说下jquery是如何来判断页面元素是否在浏览器的可视区域内的

假设某个元素, $("#item"), 如果元素在可见区域时就打印'出现了'，该元素在不可见区域时则打印'消失了'。

首先我们要明白几个知识点

$('#item').offset().top //#item 的绝对偏移量,指#item的实际尺寸(即不包括外边框margin)的上边界到页面顶端的距离.这个值不随窗口滚动而改变
$('#item').outerHeight() //#item 的实际尺寸,即 height+padding+border
$('#item').outerHeight(true) //#item的实际尺寸及外边距,即 height+padding+border+margin
$(window).scrollTop() //窗口滚动的顶部偏移量,即此时页面的上边界到可视区域的上边界的偏移量,简单的可以理解成整个页面滚动了多少距离
$(window).height() //浏览器窗口可视区域的高度

接下来我们具体来分析，在窗口上下滚动的情况下, 一个页面元素的状态我们可以分为3种

1、向上滚动超出可见区域

2、向下滚动超出可视区域

3、在可视区域内

那么很明显，情况1：由于元素随页面向上滚动, 整个页面滚动的距离大于元素顶部偏移量 + 元素本身的高度 -> 超出；情况2：由于元素随页面向下滚动, 整个页面滚动的距离小于元素顶部偏移量 - 浏览器可见区域高度 -> 超出

具体代码

var $win = $(window);
var itemOffsetTop = $("#item").offset().top;
var itemOuterHeight = $("#item").outerHeight();
var winHeight = $win.height();
$win.scroll(function () {
    var winScrollTop = $win.scrollTop();
    if(!(winScrollTop > itemOffsetTop+itemOuterHeight) && !(winScrollTop < itemOffsetTop-winHeight)) {
        console.log('出现了');
    } else {
        console.log('消失了');
    }
})

以上这篇Jquery判断页面元素是否在浏览器的可视区域内就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。