監聽滾動條動態加載

時間 2019-11-12

標籤監聽滾動條動態加載简体版

原文原文鏈接

最近作了個聊天的項目因此須要向上滾動而後動態加載，因而我就把這一塊單獨提取出來弄成插件。javascript

下面就是實現的效果css

$.fn.extend({
        scrollDetect: function(path, callback){
            var self = this;
            self[0].nodeScrollArr = {
                isLock: false,
                noteContentH: self.get(0).scrollHeight,
                nodeScrollTop: self.scrollTop()
            }
            // 直接弄在arr上面他從新取值的話會被覆蓋this.nodeScrollArr
            self.bind('scroll',function() {
                var scrollTop = self.scrollTop(),//滾動高度
                    viewH = self.height(),//可見高度
                    contentH = self.get(0).scrollHeight;//內容高度
                if(!self[0].nodeScrollArr.isLock){            
                    if(path == 'top' && scrollTop <= 5 && contentH > viewH + 20 && self[0].nodeScrollArr.nodeScrollTop > scrollTop){  
                        self[0].nodeScrollArr.isLock = true;
                        //滾動條至頁面 (滾動條存在)  noteScrollTop > scrollTop這個是爲了肯定他是向下滾動的
                        self[0].nodeScrollArr.noteContentH = contentH;//記錄當前的內容高度
                        callback && callback();
                        self[0].nodeScrollArr.isLock = false;
                    } else if(path == 'bottom' && contentH - viewH - scrollTop <= 5 && contentH > viewH + 20 && self[0].nodeScrollArr.nodeScrollTop < scrollTop) {
                        self[0].nodeScrollArr.isLock = true;
                        //滾動條至頁面 (滾動條存在)  noteScrollTop > scrollTop這個是爲了肯定他是向下滾動的
                        self[0].nodeScrollArr.noteContentH = contentH;//記錄當前的內容高度
                        callback && callback();
                        self[0].nodeScrollArr.isLock = false;
                    }            
                }
                self[0].nodeScrollArr.nodeScrollTop = scrollTop;

                return self;
            });
        }
    });

調用html

$('#a1').scrollDetect('top', function(){
        var getArr = fnAdd();
        if(getArr) {
            // console.log(getArr)
            for(var i in getArr) {
                arrAdd.unshift(getArr[i]);
            }
            draw('#a1',arrAdd);
            console.log($('#a1'))
            $('#a1').scrollTop($('#a1').get(0).scrollHeight - $('#a1')[0].nodeScrollArr.noteContentH);      
        } else {
            fnTip(document.getElementsByClassName('tip1')[0]);
        }

    })

全部的代碼模擬一下ajax請求：java

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
</head>
<style type="text/css">
*{margin: 0; padding: 0;}
.scrollbox{width: 300px; height: 400px; border:1px solid #999; margin: 50px auto; position: relative; overflow: hidden; }
.scrollContext{width: 100%; height: 100%; overflow-y: auto;}
.font{padding: 5px; margin:10px 5px; border:1px solid #ccc; border-radius: 3px; width: 200px;}
.tip1,.tip2{z-index: 10; position: absolute; top: 3px; left: 50%; margin-left: -47px; width: 94px; height: 22px; line-height: 22px; background-color: #eee;
    text-align: center; border-radius: 5px; color: #666; -webkit-transform-origin: top; -webkit-transform: scale(0); transition: 0.5s; opacity: 0; font-size: 12px;}
</style>
<body>
<div class="scrollbox">
    <div class="tip1">沒有更多消息</div>
    <div class="scrollContext" id="a1"></div>
</div>
<script type="text/javascript">
(function(){
    // 滾動方法
    // 監控方向 目標 回調
    // 這裏的pos記得在外面定義一個全局的變量 否者pos.nodeScrollArr在外面是null的，沒有這東西
    $.fn.extend({
        scrollDetect: function(path, callback){
            var self = this;
            self[0].nodeScrollArr = {
                isLock: false,
                noteContentH: self.get(0).scrollHeight,
                nodeScrollTop: self.scrollTop()
            }
            // 直接弄在arr上面他從新取值的話會被覆蓋this.nodeScrollArr
            self.bind('scroll',function() {
                var scrollTop = self.scrollTop(),//滾動高度
                    viewH = self.height(),//可見高度
                    contentH = self.get(0).scrollHeight;//內容高度
                if(!self[0].nodeScrollArr.isLock){            
                    if(path == 'top' && scrollTop <= 5 && contentH > viewH + 20 && self[0].nodeScrollArr.nodeScrollTop > scrollTop){  
                        self[0].nodeScrollArr.isLock = true;
                        //滾動條(滾動條存在)  noteScrollTop > scrollTop這個是爲了肯定他是向下滾動的
                        self[0].nodeScrollArr.noteContentH = contentH;//記錄當前的內容高度
                        callback && callback();
                        self[0].nodeScrollArr.isLock = false;
                    } else if(path == 'bottom' && contentH - viewH - scrollTop <= 5 && contentH > viewH + 20 && self[0].nodeScrollArr.nodeScrollTop < scrollTop) {
                        self[0].nodeScrollArr.isLock = true;
                        //滾動條(滾動條存在)  noteScrollTop > scrollTop這個是爲了肯定他是向下滾動的
                        self[0].nodeScrollArr.noteContentH = contentH;//記錄當前的內容高度
                        callback && callback();
                        self[0].nodeScrollArr.isLock = false;
                    }            
                }
                self[0].nodeScrollArr.nodeScrollTop = scrollTop;

                return self;
            });
        }
    });
    var arrAdd = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
    var arrchildAdd = [70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,90,91,92,93,94,95,23,24,25,26,27,28,29,30];
    function draw(tag,arr) {
        var html = '';
        for(var i in arr) {
            html += '<p class="font">'+arr[i]+'</p>';
        }
        $(tag).html(html);  
    }
    draw('#a1',arrAdd);
    $('#a1').scrollTop($('#a1').get(0).scrollHeight);//到底部
    $('#a1').scrollDetect('top', function(){
        var getArr = fnAdd();
        if(getArr) {
            // console.log(getArr)
            for(var i in getArr) {
                arrAdd.unshift(getArr[i]);
            }
            draw('#a1',arrAdd);
            console.log($('#a1'))
            $('#a1').scrollTop($('#a1').get(0).scrollHeight - $('#a1')[0].nodeScrollArr.noteContentH);      
        } else {
            fnTip(document.getElementsByClassName('tip1')[0]);
        }

    })


    // 提示方法
    function fnTip(tip) {
        tip.style.WebkitTransform="scale(1)";
        tip.style.opacity=1;
        setTimeout(function(){
            tip.style.WebkitTransform="scale(0)";
            tip.style.opacity=0;
        },1000);
    }

    var add = 0;
　　//模擬請求接口返回數據
    function fnAdd(){
        add++;
        if(add > 3) {
            return null;
        } else {
            var returnArr = [];
            for(var i = add*10 - 10; i < add*10;i++) {
                returnArr.push(arrchildAdd[i]);
            }
            return returnArr;
        }
    }
})();
</script>
</body>
</html>

//滾動條是否在底部node

dom[0].scrollTop + dom.height() === dom[0].scrollHeightjquery

滾動條在Y軸上的滾動距離 + 內容可視區域的高度 === 內容可視區域的高度加上溢出（滾動）的距離web

轉載請註明出處：http://www.cnblogs.com/matthew9298-Begin20160224/ajax