各种滚动相关

判断元素是否进入视窗

function isInSight(el){
            var eldom = typeof el == 'object'?el:document.querySelector(el);
            var bound = eldom.getBoundingClientRect();
            // 这里的bound包含了el距离视窗的距离；
            // bound.left是元素距离窗口左侧的距离值；
            // bound.top是袁术距离窗口顶端的距离值；

            // 以以上两个数值判断元素是否进入视窗；
            var clientHeigt = window.innerHeight;
            var clientWidth = window.innerWidth;
            // return (bound.top>=0&&bound.left>=0)&&(bound.top<=window.innerHeight+20)&&(bound.left<=window.innerWidth+20);
            return !((bound.top>clientHeigt)||(bound.bottom<0)||(bound.left>clientWidth)||(bound.right<0))
        }

图片懒加载

// 当加载完成，检测并加载可视范围内的图片
        window.onload= checkAllImgs;
        // 添加滚动监听，即可视范围变化时检测当前范围内的图片是否可以加载了
        window.addEventListener("scroll",function(){
            checkAllImgs();
        })

        // 检测所有图片，并给视窗中的图片的src属性赋值，即开始加载；
        function checkAllImgs(){
            var imgs = document.querySelectorAll("img");
            Array.prototype.forEach.call(imgs,function(el){
                if(isInSight(el)){
                    loadImg(el);
                }
            })
        }
        // 开始加载指定el的资源
        function loadImg(el){
            var eldom = typeof el == 'object'?el:document.querySelector(el);
            if(!eldom.src){
               // 懒加载img定义如：<div class="img"><img  alt="加载中" data-index=7 data-src="http://az608707.vo.msecnd.net/files/MartapuraMarket_EN-US9502204987_1366x768.jpg"></div>
                var source = eldom.getAttribute("data-src");
                var index = eldom.getAttribute("data-index");
                eldom.src = source;
                console.log("第"+index+"张图片进入视窗，开始加载。。。。")
            }
            
        }

判断元素是否滚动到底部ing

 function isbottom(el) {
 return el.scrollHeight -el.clientHeight <=0
 
 }