jQuery またはネイティブ js を使用してマウススクロールを実装し、page_jquery に新しいデータをロードします。-jsチュートリアル-php.cn

jQuery またはネイティブ js を使用してマウススクロールを実装し、page_jquery に新しいデータをロードします。

WBOY

リリース： 2016-05-16 15:11:57

オリジナル

2001 人が閲覧しました

ウォーターフォールフロー画像のレイアウトを見たことがある人は多いと思います。これらの画像は動的に読み込まれ、サーバーへの負担は比較的小さいです。 : qq スペースに入り、スペースをプルダウンすると、一番下に到達すると、残りのコメントまたはログが動的に読み込まれます。今日は、その実装アイデアと、js を使用して動的読み込みを制御するコードを見ていきます。

次のコードは主に、画像の読み込みや記録データの読み込みなど、スクロールバーがプルダウンされたときの読み込みイベントを制御します。

jQuery ライブラリをロードした後、次のように使用できます:

 $(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(document).height();
    var windowHeight = $(this).height();
    if (scrollTop + windowHeight == scrollHeight) {

   //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作

//var page = Number($("#redgiftNextPage").attr('currentpage')) + 1;
//redgiftList(page);
//$("#redgiftNextPage").attr('currentpage', page + 1);

    }
  });

ログイン後にコピー

分析:

スクロールバーが一番下に到達するかどうかを判断するには、DOM の 3 つの属性値、つまり、scrollTop、clientHeight、scrollHeight を使用する必要があります。

scrollTop は、Y 軸上のスクロールバーのスクロール距離です。
clientHeight は、コンテンツの表示領域の高さです。
ScrollHeight は、コンテンツの表示領域の高さにオーバーフロー (スクロール) 距離を加えたものです。

これら 3 つの属性の導入からわかるように、スクロールバーが一番下に到達する条件は、scrollTop + clientHeight ==scrollHeight です。

純粋な JS ではこれを行うことができます:

window.onscroll = function() { 
   var scrollTop = document.body.scrollTop; 
   var offsetHeight = document.body.offsetHeight; 
   var scrollHeight = document.body.scrollHeight; 
   if (scrollTop == scrollHeight - offsetHeight) { 
    page++; 
    loadList(page); 
   } 
  }; 
 
 
function loadList(page) { 
   page = page || 1; 
 
   if (isLoad) { 
    getJSON('/forum.php&#63;mod=hot&page=' + page).then(function(data) { 
     if (data.code == 200) { 
      data = data.data; 
      if (data && Object.keys(data).length > 0) { 
       for (var k in data) { 
        var v = data[k]; 
        detailTemplate = detailTemplate.cloneNode(true); 
        var userInfoObj = detailTemplate.getElementsByClassName('user-info')[0]; 
        userInfoObj.getElementsByClassName('name')[0].innerText = v.author; 
        userInfoObj.getElementsByClassName('avatar')[0].src = v.avatar; 
        userInfoObj.getElementsByClassName('post-time')[0].innerHTML = v.lastpost; 
        detailTemplate.getElementsByClassName('title')[0].innerText = v.subject; 
        detailTemplate.getElementsByClassName('desc')[0].innerText = v.subject; 
        var extInfoObj = detailTemplate.getElementsByClassName('ext-info')[0]; 
        extInfoObj.getElementsByClassName('from')[0].innerText = v.fname; 
        extInfoObj.getElementsByClassName('view-time')[0].innerText = v.views; 
        postListObj.appendChild(detailTemplate); 
       } 
      } else { 
       isLoad = false; 
      } 
     } else { 
      isLoad = false; 
     } 
    }, function(status) { 
     console.log('Something went wrong, status is ' + status); 
    }); 
   } 
  }

ログイン後にコピー