無限スクロールjqueryプラグイン
Coldfusionで開発しているサイトに無限スクロールを設定しようとしていますが、javascriptとjqueryが初めてなので、これらすべてに頭を悩ませる問題があります。無限スクロールプラグインを使用するために、サイトでページネーションを行う必要がありますか、それともそれを実行する方法はありますか？
このために無限スクロールプラグインは必要ありません。スクロールがページの最後に到達したことを検出するには、jQueryを使用します。
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
//Add something at the end of the page
}
});
デモ JsFiddleで
AJAXリクエストでフセインの答えを使用しています。10pxではなく300pxでトリガーするようにコードを変更しましたが、AJAX =スクロールコールは10px範囲よりも300px範囲で頻繁にトリガーされるため、リクエストは終了しました。
これを修正するために、成功したときに反転されるトリガーを追加しましたAJAXロード。私のコードは次のようになります。
var scrollLoad = true;
$(window).scroll(function () {
if (scrollLoad && $(window).scrollTop() >= $(document).height() - $(window).height() - 300) {
scrollLoad = false;
//Add something at the end of the page
}
});
次に、私のAJAX応答で、scrollLoadをtrueに設定します。
ここでフセインの小さな例の上に構築して、jQueryウィジェットを作成しました。追加された結果を一時的に保存するlocalStorageをサポートし、頻繁に追加を停止する一時停止機能があり、続行するにはクリックが必要です。
試してみる：
フッターのように、このコードを使用できる参照がある場合、ID #footerのフッターdivがあるとしましょう。
function element_in_scroll(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(document).scroll(function(e){
if (element_in_scroll("#footer")) {
//Here you must do what you need to achieve the infinite scroll effect...
};
});
また、jqueryマニュアルで無限スクロールを作成する方法について詳しくは、こちらをご覧ください http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on- jquery /
$(function(){
$(window).scroll(function(){
if($(document).height()<=$(window).scrollTop()+$(window).height()+100){
alert('end of page');
}
});
});
誰かが説明を求めたので、ここに説明があります
ここで、$（document）.height（）->はドキュメント全体の高さです。ほとんどの場合、これは現在のドキュメントの要素に等しくなります。
$（window）.height（）->は、ウィンドウ（ブラウザ）の高さがブラウザで表示されるものの高さを意味します。
$（window）.scrollTop（）-> Element.scrollTopプロパティは、要素のコンテンツが上にスクロールされるピクセル数を取得または設定します。要素のscrollTopは、要素の最上部から最上部の表示コンテンツまでの距離の測定値です。要素コンテンツが垂直スクロールバーを生成しない場合、そのscrollTop値はデフォルトで0になります。
$(document).height()<=$(window).scrollTop()+$(window).height()+100
$（window）.scrollTop（）に$（window）.height（）を追加すると、結果がドキュメントの高さと等しいかどうかを確認できるようになりました。等しい場合、最後に到達したことを意味します。ドキュメントの下部から100ピクセルの前にチェックしたいので、100を追加します（条件<=の状態で）
私が間違っている場合は私を修正してください
フセインとニックのアイデアを使用してこの関数を作成しましたが、コールバックに promises を使用したかったのです。また、divがoptionsオブジェクトに送信される場合、ウィンドウだけでなく、固定スクロール領域に無限スクロール領域が必要でした。以下の2番目のリンクにその例があります。古いブラウザをサポートしたい場合は、 [〜＃〜] q [〜＃〜] のようなpromiseライブラリを使用することをお勧めします。 cbメソッドは約束である場合とそうでない場合があり、それは関係なく機能します。
次のように使用されます。
html
<div id="feed"></div>
js
var infScroll = infiniteScroll({
cb: function () {
return doSomethingPossiblyAnAJAXPromise();
}
});
フィードを一時的に停止する場合は、cbメソッドでfalseを返すことができます。フィードの終わりに達した場合に便利です。 infiniteScrollの返されたオブジェクトメソッド 'setShouldLoad'を呼び出して、上記のコードに沿ってtrueと例を渡すことにより、再び開始できます。
infScroll.setShouldLoad(true);
無限スクロールの機能はこれです
function infiniteScroll (options) {
// these options can be overwritten by the sent in options
var defaultOptions = {
binder: $(window), // parent scrollable element
loadSpot: 300, //
feedContainer: $("#feed"), // container
cb: function () { },
}
options = $.extend(defaultOptions, options);
options.shouldLoad = true;
var returnedOptions = {
setShouldLoad: function (bool) { options.shouldLoad = bool; if(bool) { scrollHandler(); } },
};
function scrollHandler () {
var scrollTop = options.binder.scrollTop();
var height = options.binder[0].innerHeight || options.binder.height();
if (options.shouldLoad && scrollTop >= (options.binder[0].scrollHeight || $(document).height()) - height - options.loadSpot) {
options.shouldLoad = false;
if(typeof options.cb === "function") {
new Promise(function (resolve) {resolve();}).then(function() { return options.cb(); }).then(function (isNotFinished) {
if(typeof isNotFinished === "boolean") {
options.shouldLoad = isNotFinished;
}
});
}
}
}
options.binder.scroll(scrollHandler);
scrollHandler();
return returnedOptions;
}
スクロールオーバーフローのあるdivのようなスクロール可能な要素があり、スクロール可能なドキュメント/ページがない場合は、この方法を使用できます。
$(function () {
var s = $(".your-scrollable-element");
var list = $("#your-table-list");
/* On element scroll */
s.scroll(function () {
/* The scroll top plus element height equals to table height */
if ((s.scrollTop() + s.height()) == list.height()) {
/* you code */
}
});
});
私は同じ問題を抱えていましたが、私のニーズに適したプラグインが見つかりませんでした。そこで、次のコードを書きました。このコードは、ajaxとページネーションでデータを取得することにより、テンプレートを要素に追加します。ユーザーがdivの一番下までスクロールしたときを検出するために、私はこの条件を使用しました：
var t = $("#infiniteContent").offset().top;
var h = $("#infiniteContent").height();
var ws = $(window).scrollTop();
var dh = $(document).height();
var wh = $(window).height();
if (dh - (wh + ws) < dh - (h + t)) {
//now you are at bottom of #infiniteContent element
}
$(document).ready(function(){
$.getJSON("https://jsonplaceholder.typicode.com/comments", { _page: 1, _limit:3 }, function (jsonre) {
appendTemplate(jsonre,1);
});
});
function appendTemplate(jsonre, pageNumber){
//instead of this code you can use a templating plugin like "Mustache"
for(var i =0; i<jsonre.length; i++){
$("#infiniteContent").append("<div class='item'><h2>"+jsonre[i].name+"</h2><p>"+jsonre[i].body+"</p></div>");
}
if (jsonre.length) {
$("#infiniteContent").attr("data-page", parseInt(pageNumber)+1);
$(window).on("scroll", initScroll);
//scroll event will not trigger if window size is greater than or equal to document size
var dh = $(document).height() , wh = $(window).height();
if(wh>=dh){
initScroll();
}
}
else {
$("#infiniteContent").attr("data-page", "");
}
}
function initScroll() {
var t = $("#infiniteContent").offset().top;
var h = $("#infiniteContent").height();
var ws = $(window).scrollTop();
var dh = $(document).height();
var wh = $(window).height();
if (dh - (wh + ws) < dh - (h + t)) {
$(window).off('scroll');
var p = $("#infiniteContent").attr("data-page");
if (p) {
$.getJSON("https://jsonplaceholder.typicode.com/comments", { _page: p, _limit:3 }, function (jsonre) {
appendTemplate(jsonre, p);
});
}
}
}<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="infiniteContent"></div>