如何判斷滾動是否滾動到了底部?
首先要了解的知識 scrollHeight
,clientHeight
,scrollTop
scrollHeight
只讀屬性,高度包括所有內(nèi)容,包含內(nèi)邊距,但不把水平滾動條、邊框和外邊距算在內(nèi)。
clientHeight
也是只讀屬性,沒有定義CSS
或者內(nèi)聯(lián)布局盒子的元素為0,它是元素內(nèi)部的高度,包含內(nèi)邊距,不包括x軸的滾動條高度、邊框、外邊距;
同一種型號的手機上是不變的。
scrollTop
這個元素的頂部滾動距離(到視口(一般都是html
)的頂部的距離)。
可以實現(xiàn)計算到底部的距離了
計算是否到達底部原生js
element.scrollHeight - element.scrollTop === element.clientHeight
jquery
element..scrollHeight - element.scrollTop() == element.height()
實現(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對象里,就能用data['options'+(index+1)]獲取到了 var data = { options1,options2,options3 }//請求語句所在 loadingState.text = true; textRender(options1);//監(jiān)聽要滑動容器的滾動事件$('.content').scroll(function(e){ var index = $(this).index(); //獲取滾動的距離 var sTop = $('.content').eq(index).scrollTop(); //獲取容器的高度 var contentHeight = $('.content').eq(index).height(); //獲取滾動高度 var scrollHeight = $('.content').eq(index)[0].scrollHeight; //根據(jù)所選的不同options加載不同的內(nèi)容 if(index==$(this).index()&&loadingState.text!=true) { //判斷是否已經(jīng)滾動底 if((sTop+contentHeight)==scrollHeight){ //當(dāng)?shù)竭_底部是加載選項為true,之后的操作 loadingState.text = true; //內(nèi)容緩慢淡出 $(this).animate({ scrollTop:sTop+80 },1000) var options = data['options'+(index+1)]; //頁數(shù)加一 options.page += 1; //加載新獲取的內(nèi)容 textRender(options); } } }//加載實現(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">評論</a> </div> </div> ` $('.content:eq(0)').append(html).css('backgroundImage',"none") loadingState.text = false; $('.loading.text').stop(true).slideUp(2000,function(){ $('.loading.text').remove() }) }) }) }}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答