web-dev-qa-db-ja.com

javascript：スクロール終了を検出

divにoverflowが設定されたscrollレイヤーがあります。

divの一番下までスクロールすると、関数を実行したいです。


javascriptjqueryhtmlscrollbarscroll
57
Zebra

受け入れられた答えは根本的に欠陥があり、その後削除されました。正解は次のとおりです。

function scrolled(e) {
  if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {
    scrolledToBottom(e);
  }
}

FirefoxでこれをテストしましたChromeおよびOpera。動作します。

93
Bjorn Tipling

OKこれが適切なソリューションです

id="myDiv"を含むDiv呼び出しがあります

ので、関数が行きます。

function GetScrollerEndPoint()
{
   var scrollHeight = $("#myDiv").prop('scrollHeight');
   var divHeight = $("#myDiv").height();
   var scrollerEndPoint = scrollHeight - divHeight;

   var divScrollerTop =  $("#myDiv").scrollTop();
   if(divScrollerTop === scrollerEndPoint)
   {
       //Your Code 
       //The Div scroller has reached the bottom
   }
}
6
maxspan

上記の回答のいずれも機能しないため、ここで3番目のオプションを選択します。 （これはjQueryで使用されます）

if (($(window).innerHeight() + $(window).scrollTop()) >= $("body").height()) {
    //do stuff
}

これが誰にも役立つことを願っています！

6
just_user

これは私のために働いた：

$(window).scroll(function() {
  buffer = 40 // # of pixels from bottom of scroll to fire your function. Can be 0
  if ($(".myDiv").prop('scrollHeight') - $(".myDiv").scrollTop() <= $(".myDiv").height() + buffer )   {
    doThing();
  }
});

JQuery 1.6以降を使用する必要があります

4
AlexQueue

動作する代替手段を見つけました。

これらの答えはどれも私にとってはうまくいきませんでした（現在FireFox 22.0でテストしています）。そして、多くの調査の結果、かなりクリーンで簡単なソリューションであることがわかりました。

実装されたソリューション：

function IsScrollbarAtBottom() {
    var documentHeight = $(document).height();
    var scrollDifference = $(window).height() + $(window).scrollTop();
    return (documentHeight == scrollDifference);
}

リソース： http://jquery.10927.n7.nabble.com/How-can-we-find-out-scrollbar-position-has-reached-at-the-bottom-in-js-td145336。 html

よろしく

3
Chandler Zwolle

Bjorn Tiplingの答えに基づいて、イベントベースのソリューションを作成しました。

(function(doc){
    'use strict';

    window.onscroll = function (event) {
        if (isEndOfElement(doc.body)){
            sendNewEvent('end-of-page-reached');
        }
    };

    function isEndOfElement(element){
        //visible height + pixel scrolled = total height 
        return element.offsetHeight + element.scrollTop >= element.scrollHeight;
    }

    function sendNewEvent(eventName){
        var event = doc.createEvent('Event');
        event.initEvent(eventName, true, true);
        doc.dispatchEvent(event);
    }
}(document));

そして、次のようにイベントを使用します。

document.addEventListener('end-of-page-reached', function(){
    console.log('you reached the end of the page');
});

ところで：ページがどれくらいの長さであるかを知るために、JavaScript用にこのCSSを追加する必要があります

html, body {
    height: 100%;
}

デモ： http://plnkr.co/edit/CCokKfB16iWIMddtWjPC?p=preview

1
Pylinux
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight)
{
//your code here
}

私もそれを検索し、ここですべてのコメントをチェックした後でも、これが一番下に到達したかどうかをチェックするソリューションです。

1
Moshe Cohen

innerHeightは一部の古いIEバージョンでは動作しないため、clientHeightを使用できます。

$(window).scroll(function (e){
    var body = document.body;    
    //alert (body.clientHeight);
    var scrollTop = this.pageYOffset || body.scrollTop;
    if (body.scrollHeight - scrollTop === parseFloat(body.clientHeight)) {
        loadMoreNews();
    }
});
0
Rado

この例を見てください：MDN Element.scrollHeight

この例を確認することをお勧めします：stackoverflow.com/a/24815216...クロスブラウザ処理を実装しますスクロールアクション用。

次のスニペットを使用できます。

//attaches the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        scrollTop = target.scrollTop || window.pageYOffset,
        scrollHeight = target.scrollHeight || document.body.scrollHeight;
    if (scrollHeight - scrollTop === $(target).innerHeight()) {
      console.log("► End of scroll");
    }
});
0
jherax