MVC 5アプリケーションの部分ビューの下にスクロールを検出します。

Question

HTMLテーブルに大量のデータを返すパーシャルビューがあります。私はjquery hereを使用して無限のスクロール技術を実装し、スクロールダウンするときにテーブルをロードします。ビューから部分ビューをレンダリングすると、すべてが期待通りに機能します。スクロールはページ・レベルで行われます。私は、部分ビューテーブルの周りだけにスクロールバーを持っていたい。 問題は、スクロールを設定するためにパーシャルビューの周りにタグを置いたときに、スクロールが底に当たったときに検出されないことです。

これはiframe hereの実装を見ましたが、部分的に表示する必要があります。

ビューには表の見出しとテキストのみがあり、次に部分ビューが呼び出されます。

<div style="height: 400px; width: 600px; overflow: auto;"> 
     <div id="loading"></div> 
     <div id="productList">    
       @Html.Partial("_PartialViewName")    
     </div> 
</div> 

これらはjavascriptです。部分ビューでのスクロールを検出する.scroll関数を設定するにはどうすればよいですか？

function loadProducts() { 
     if (page > -1 && !_inCallback) { 
      _inCallback = true; 
      page++; 
      $('div#loading').html('<p><img src="/Content/Images/ajax-loader.gif"></p>'); 
      $.get("/Users/Index/" + page, function (data) { 
       if (data != '') { 
        $("#productList").append(data); 
       } 
       else { 
        page = -1; 
       } 

       _inCallback = false; 
       $('div#loading').empty(); 
      }); 
     } 
    } 


    $(window).scroll(function() { 
     if ($(window).scrollTop() == $(document).height() - $(window).height()) { 

      loadProducts(); 
     } 
    }); 

Answer 1

おそらく、スクロール機能を変更する必要があります。あなたは '#productList'で 'window'を変更しようとしましたか？ 私は今それを試すことはできません、申し訳ありません、それは単なるアイデアです。

編集：Hereはjsfiddleで見つかった例です。これがあなたを助けることを願っています。

$(".box").scroll(function() { 
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { 
     $("span").show();  
    } else { 
     $("span").hide(); 
    } 
}); 

編集2：あなたは、ウィンドウのスクロールを捕獲しようとしている：私は私の答えは正しくありませんでしたことがわかりました。あなたは、オーバーフローとdivのスクロールをキャプチャする必要があります：自動...

HTML

<div id="overflowdiv" style="height: 400px; width: 600px; overflow: auto;"> 
     <div id="loading"></div> 
     <div id="productList"> 

JS

$("#overflowdiv").scroll(function() { 
     console.debug("scroll activado!"); 
     console.debug($(this).scrollTop() + $(this).innerHeight() + " " + $(this)[0].scrollHeight); 

     if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { 
      loadProducts(); 
     } 
    }); 

これは私のために正常に動作しています。