懶加載實現的分頁&&網站footer自適應

2019-11-19 18:20:50

字體：大中小

來源：轉載

供稿：網友

最近在做手機端，發現下拉刷新和上拉加載的jq控件很少而且自我感覺不好用，比如iscroll之類……

然后自己寫了個懶加載的，也很簡單，最基礎的代碼【不喜勿噴，但蠻實用的】

wap手機端懶加載分頁：

用之前先引用下jquery.js

var current = 1; $(function() { $('body').bind('touchmove', function(e) {  if($(this).scrollTop() > ($(window).height() * current - 150)) {//這里的150表示距離底部150像素觸發，可自行調節  current++;  console.log("第" + current + "頁");  //這里放你的分頁代碼  } }); });

if($(this).scrollTop()==0){//這是wap刷新代碼，有需要請結合使用}

web電腦端懶加載分頁：

用之前先引用下jquery.js

var current = 1; $(function() {  window.onscroll = function() {  if($(document).scrollTop() >= ($(document).height() - $(window).height() - 150)) {//150與wap手機端一樣   current++;   //這里放你的分頁代碼  }  } });

if($(document).scrollTop()==0){//這是web刷新代碼，有需要請結合使用}

web電腦端footer底部固定：

 .footer.position { position: absolute; bottom: 0; }

$(function() {  auto();  window.onresize = function() {  auto();  } }); function auto() {  if($(window).height() > 917) {//917可自行調整，根據頁面的內容高度  $(".footer").addClass("position");  } else {//.position見css  $(".footer").removeClass("position");  } }

另一種方法【推薦】

function auto() {  $("body").scrollTop(1); //控制滾動條下移1px   if($("body").scrollTop() > 0) {  $(".footer").removeClass("position");  alert("有滾動條");  } else {  $(".footer").addClass("position");  alert("沒有滾動條");  }  $("body").scrollTop(0); //滾動條返回頂部  }

附上兩張前后對比圖，footer固定底部