小編給大家分享一下移動(dòng)端html5如何判斷是否滾動(dòng)到底部并且下拉加載，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括安圖網(wǎng)站建設(shè)、安圖網(wǎng)站制作、安圖網(wǎng)頁(yè)制作以及安圖網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，安圖網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到安圖省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

如何判斷滾動(dòng)是否滾動(dòng)到了底部?

首先要了解的知識(shí)scrollHeight,clientHeight,scrollTop

scrollHeight

只讀屬性,高度包括所有內(nèi)容，包含內(nèi)邊距，但不把水平滾動(dòng)條、邊框和外邊距算在內(nèi)。

clientHeight

也是只讀屬性，沒(méi)有定義CSS或者內(nèi)聯(lián)布局盒子的元素為0,它是元素內(nèi)部的高度，包含內(nèi)邊距，不包括x軸的滾動(dòng)條高度、邊框、外邊距;

同一種型號(hào)的手機(jī)上是不變的。

scrollTop

這個(gè)元素的頂部滾動(dòng)距離(到視口(一般都是html)的頂部的距離)。

可以實(shí)現(xiàn)計(jì)算到底部的距離了

計(jì)算是否到達(dá)底部原生js

element.scrollHeight - element.scrollTop === element.clientHeight

jquery

element..scrollHeight - element.scrollTop() == element.height()

實(shí)現(xiàn)下拉刷新

用到的是html+jq

var loadingState = {
        text:false,
        image:false,
        video:false
    }
    
var httpUrl2 = "https://api.apiopen.top/getJoke"
    var options1 = {
        page:1,
        count:10,
        type:"text"
    }
    var options2 = {
        page:1,
        count:10,
        type:"image"
    }
    var options3 = {
        page:1,
        count:10,
        type:"video"
    }
    
    //在window里獲取不到options,就只能把options放在data對(duì)象里，就能用data['options'+(index+1)]獲取到了
    var data = {
        options1,options2,options3
    }

//請(qǐng)求語(yǔ)句所在
    loadingState.text = true;
    textRender(options1);

//監(jiān)聽(tīng)要滑動(dòng)容器的滾動(dòng)事件
$('.content').scroll(function(e){
    var index = $(this).index();
    //獲取滾動(dòng)的距離
        var sTop =  $('.content').eq(index).scrollTop();
    //獲取容器的高度
        var contentHeight = $('.content').eq(index).height();
    //獲取滾動(dòng)高度
        var scrollHeight = $('.content').eq(index)[0].scrollHeight;
       //根據(jù)所選的不同options加載不同的內(nèi)容
        if(index==$(this).index()&&loadingState.text!=true)         {
         //判斷是否已經(jīng)滾動(dòng)底
            if((sTop+contentHeight)==scrollHeight){
                //當(dāng)?shù)竭_(dá)底部是加載選項(xiàng)為true,之后的操作
                loadingState.text = true;
                //內(nèi)容緩慢淡出
                $(this).animate({
                    scrollTop:sTop+80
                },1000)
                var options = data['options'+(index+1)];
                //頁(yè)數(shù)加一
                options.page += 1;
                //加載新獲取的內(nèi)容
                textRender(options);
            }
        }           
}

//加載實(shí)現(xiàn)函數(shù)
funtion textRender(obj){
    //要添加的內(nèi)容
    if(obj == options1){
            console.log(obj);
            $.get(httpUrl2,obj).then(function(res){            
                res.result.forEach(function(item,i){
                    var html = `
                        <div class="mui-card">
                            <div class="mui-card-header mui-card-media">
                                <img src="${item.header}">
                                <div class="mui-media-body">
                                    ${item.name}
                                    <p>發(fā)表于 ${item.passtime}</p>
                                </div>
                                
                            </div>
                            <div class="mui-card-content">
                                <div class="mui-card-content-inner">
                                    <p>${item.text}</p>
                                </div>
                            </div>
                            <div class="mui-card-footer">
                                <a class="mui-card-link">喜歡</a>
                                <a class="mui-card-link">評(píng)論</a>
                            </div>
                        </div>
                    `
                    $('.content:eq(0)').append(html).css('backgroundImage',"none")
                    loadingState.text = false;
                    $('.loading.text').stop(true).slideUp(2000,function(){
                        $('.loading.text').remove()
                    })
                })
            })
        }
}

看完了這篇文章，相信你對(duì)“移動(dòng)端html5如何判斷是否滾動(dòng)到底部并且下拉加載”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

名稱欄目：移動(dòng)端html5如何判斷是否滾動(dòng)到底部并且下拉加載-創(chuàng)新互聯(lián)
標(biāo)題URL：http://www.rwnh.cn/article20/ceidjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站策劃、標(biāo)簽優(yōu)化、網(wǎng)站收錄、電子商務(wù)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)