您好,登錄后才能下訂單哦!
小編給大家分享一下移動(dòng)端html5如何判斷是否滾動(dòng)到底部并且下拉加載,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
如何判斷滾動(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)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。