phpstudy集成环境

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

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

前端开发中,有时需要判断某个元素是否在浏览器的可视区域内,或者是否已经滚动出了可视区域.首先想到的便是javascript操作,原生方法自然可以,不过Jquery已经封装了一些属性,使用起来更方便些,我们这里就讨论这种Jquery的方式.

假设此元素为 #item,先说几个关键的属性:

jQuery('#item').offset().top

item 的绝对偏移量,指#item的实际尺寸(即不包括外边框margin)的上边界到页面顶端的距离.这个值不随窗口滚动而改变


jQuery('#item').outerHeight()

item 的实际尺寸,即 height+padding+border

jQuery('#item').outerHeight(true)

item的实际尺寸及外边距,即 height+padding+border+margin

jQuery(window).scrollTop()

窗口滚动的顶部偏移量,即此时页面的上边界到可视区域的上边界的偏移量,简单的可以理解成整个页面滚动了多少距离


jQuery(window).height()

浏览器窗口可视区域的高度

在窗口上下滚动的情况下,一个页面元素的状态有3种,1.向上滚动超出可视区域,2.向下滚动超出可视区域,3.在可视区域内.很明显,我们需要的就是1和2两种情况.

情况1:
由于元素随页面向上滚动,所以自然能想到,在页面顶部偏移量不断增加的过程中,边界是从上至下经过一段距离,而这个距离的区域恰好就是元素本身的偏移量加上元素本身的高度,所以当

jQuery(window).scrollTop()>(jQuery('#item').offset().top+jQuery('#item').outerHeight())

这个表达式结果为true时,表示元素已经向上滚动,并超出了可视区域.

情况2:
与情况1相反,向下滚动的过程,页面顶部的偏移量是在不断减少中,所以当它小于元素偏移量与可视区域高度的差值的时候,元素则向下并超出了可视区域,即

jQuery(window).scrollTop()<(jQuery('#item').offset().top-jQuery(window).height())

那么结论就是将这两种情况作或运算即可达到目的.以下表达式结果如果为true,则 #item 不在可视区域内.反之则在可视区域内.

(jQuery(window).scrollTop()>(jQuery('#item').offset().top+jQuery('#item').outerHeight()))||((jQuery(window).scrollTop()+jQuery(window).height())<jQuery('#item').offset().top)

参考文章

楼主去搜索下 getBoundClientRect 这个函数，是你想要的

js版:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #test {
            width: 200px;
            height: 200px;
            background-color: #f0ff10;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 800px;
        }
    </style>
</head>
<body style="height: 2000px;">
<div id="test"></div>
<script>
    function isElementInViewport(el) {
        var rect = el.getBoundingClientRect();
        return (
                rect.top >= 0 &&
                rect.left >= 0 &&
                rect.bottom <= (window.innerHeight || document. documentElement.clientHeight) && /*or $(window).height() */
                rect.right <= (window.innerWidth || document. documentElement.clientWidth) /*or $(window).width() */
        );
    }
    function givenElementInViewport (el, fn) {
        return function () {
            if (isElementInViewport(el)) {
                fn.call();
            }
        }
    }
    function addViewportEvent (el, fn) {
        if (window.addEventListener) {
            addEventListener('DOMContentLoaded', givenElementInViewport(el, fn), false);
            addEventListener('load', givenElementInViewport(el, fn), false);
            addEventListener('scroll', givenElementInViewport(el, fn), false);
            addEventListener('resize', givenElementInViewport(el, fn), false);
        } else if (window.attachEvent)  {
            attachEvent('DOMContentLoaded', givenElementInViewport(el, fn));
            attachEvent('load', givenElementInViewport(el, fn));
            attachEvent('scroll', givenElementInViewport(el, fn));
            attachEvent('resize', givenElementInViewport(el, fn));
        }
    }
    var test = document.querySelector('#test');
    addViewportEvent(test,function(){
        alert('轮到我出场了，嘿嘿');
    })
</script>
</body>
</html>

谢谢兄弟，是我想要的

【热门文章】
【热门文章】