지연 로딩으로 구현된 페이지 매김 및 웹사이트 바닥글 적응

최근 모바일 버전 작업을 하다가 풀다운 새로고침과 풀업 로딩을 위한 jq 컨트롤이 거의 없는 것을 발견했고, iscroll 등 사용하기 쉽지 않은 것 같은 느낌이 들었습니다...

그러다가 제가 직접 Lazy Loading 코드를 작성하기도 했습니다. 매우 간단하고, 가장 기본적인 코드입니다. [마음에 들지 않으면 뿌리지 마세요. 꽤 실용적입니다.]

Lazy loading Paging on 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 새로 고침 코드입니다. 필요한 경우 함께 사용하세요}

웹 컴퓨터 측 지연 로딩 페이징:

사용하기 전에 jquery.js를 인용하세요

var current = 1;
  $(function() {
   window.onscroll = function() {
    if($(document).scrollTop() >= ($(document).height() - $(window).height() - 150)) {//150与wap手机端一样
     current++;
     //这里放你的分页代码
    }
   }
  });

if($(document).scrollTop()==0){//웹 새로고침 코드입니다. 필요하시면 같이 사용해 주세요.}

웹컴퓨터 바닥글 하단 고정:

.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); //滚动条返回顶部
  }

첨부 전후 비교 사진 2장, 바닥글 고정 하단

위 내용은 이 글의 전체 내용입니다. 이 글의 내용이 모든 사람의 학습이나 업무에 어떤 도움이 되기를 바라며, PHP 중국어 웹사이트에도 도움이 되기를 바랍니다.

지연 로딩으로 구현된 페이징 및 웹사이트 바닥글 적응과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!