• 如何判断一个元素是不是可见


    function isElementInViewport (el) {
    
        //special bonus for those using jQuery
        if (typeof jQuery === "function" && el instanceof jQuery) {
            el = el[0];
        }
    
        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() */
        );
    }

    --

    https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433

    function onVisibilityChange(el, callback) {
        var old_visible;
        return function () {
            var visible = isElementInViewport(el);
            if (visible != old_visible) {
                old_visible = visible;
                if (typeof callback == 'function') {
                    callback();
                }
            }
        }
    }
    
    var handler = onVisibilityChange(el, function() {
        /* your code go here */
    });
    
    
    //jQuery
    $(window).on('DOMContentLoaded load resize scroll', handler); 
    
    /* //non-jQuery
    if (window.addEventListener) {
        addEventListener('DOMContentLoaded', handler, false); 
        addEventListener('load', handler, false); 
        addEventListener('scroll', handler, false); 
        addEventListener('resize', handler, false); 
    } else if (window.attachEvent)  {
        attachEvent('onDOMContentLoaded', handler); // IE9+ :(
        attachEvent('onload', handler);
        attachEvent('onscroll', handler);
        attachEvent('onresize', handler);
    }


    ---
  • 相关阅读:
    面向对象的设计原则
    在VC中Debug下是运行结果正确的,但是在Release下却有错,总算找到原因
    聚合和组合
    痛苦呀,代码
    MSDN和VS98
    阅读代码的难度
    好香,方便面
    人的重要性
    FIT For .NET(1)
    ASP.NET Microsoft .NET Pet Shop 3.x(二)
  • 原文地址:https://www.cnblogs.com/qinqiu/p/9340499.html
Copyright © 2020-2023  润新知