2016-05-03 2 views
0

Ich habe eine Teilansicht, die eine große Menge von Daten in einer HTML-Tabelle zurückgibt. Ich habe die unendliche Scroll-Technik mit jquery here implementiert, um die Tabelle zu laden, während Sie nach unten scrollen. Alles funktioniert wie erwartet, wenn ich die Teilansicht von einer Ansicht gerendert habe. aber das Scrollen ist auf Seitenebene. Ich möchte die Bildlaufleiste nur um die Teilansichtstabelle haben. Das Problem ist, wenn ich ein Tag um die Teilansicht legen, um einen Bildlauf festzulegen, erkennt es nicht, wenn die Bildlauf den Boden trifft.Detect Scrollen bis zum Ende einer Teilansicht in einer MVC 5-Anwendung

Ich sah eine Implementierung für iframe here, aber ich brauche es für eine Teilansicht.

Die Ansicht enthält nur Tabellenüberschriften und etwas Text und ruft dann die Teilansicht auf.

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

Dies sind die Javascripts. Wie stelle ich die .scroll-Funktion ein, um Scrollen in der Teilansicht zu erkennen?

+0

Ihr Umgang mit dem Scroll-Ereignis 'window', aber Sie müssen das scroll-Ereignis des Elements in Ihrem Teil behandeln. –

Antwort

1

Vielleicht brauchen Sie eine Änderung in Ihrer Bildlauffunktion. Hast du versucht, 'window' mit '#productList' zu ändern? Ich kann es jetzt nicht versuchen, tut mir leid, es ist nur eine Idee.

Bearbeitet: ist ein Beispiel, das ich in jfiddle gefunden habe. Hoffe das wird dir helfen.

Bearbeitet 2: Ich habe festgestellt, meine Antwort war nicht korrekt: Sie versuchen, scroll im Fenster zu erfassen. Sie müssen die Rolle in der div mit Überlauf erfassen: auto ...

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(); 
     } 
    }); 

Das ist für mich funktioniert gut.

+0

Danke für Ihre Hilfe! Das hat für mich funktioniert! – stevenjmyu

Verwandte Themen