PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
D

verticale scrolling vanuit 1 element

Door Daniel van Seggelen op 24-08-2019 08:29
1.674 views
Ik heb een element


<div id="product_list">

<div class="product-list">
 product 1
</div>
<div class="product-list">
 product 2
</div>

</div>


Ik wil dus als hij naar beneden scrolt, dus als het einde van de <div id="product_list"> de bodem bereikt heeft dat hij met ajax nieuwe resultaten laad.

Dit lijkt maar niet te lukken, hij pakt alleen als het einde van de pagina bereikt is.
Het zit zo dat er een verticale banner aan de linkerkant een stuk langer is dan de <div id="product_list"> aan de rechterkant.

Ik wil dus dat hij steeds nieuw content laad bij het scrollen naar beneden.
weet iemand de beste manier hiervoor?
zie bijv hier
https://stackoverflow.com/questions/33327255/infinite-scrolling-for-fixed-number-of-li-elements-using-jquery
R
Rob Doemaarwat
24-08-2019 09:10
Ipv op
if (scrollPos + winHeight == $(document).height()) {
te gaan bijladen moet je dan "eerder" gaan laden. Dat kan op bijvoorbeeld op 75% of "winHeight" pixels voor het eind. Dan moet je wel even een vlaggetje zetten dat je al aan het laden bent, want anders blijft ie laden (bij 76%, bij 77%, enz). Pas als je een nieuwe batch opgehaald hebt sta je weer een nieuwe bijlaad toe.

loading = false;
if (!loading && (scrollPos + winHeight > 0.75 * $(document).height())) {
  loading = true;
  //doe async call, zet loading op false indien gereed
}
D
Daniel van Seggelen
24-08-2019 09:54 gewijzigd op 24-08-2019 10:31
Ok , maar is het niet mogelijk wanneer het einde van de div element de bodem raakt?
Nu is het gewoon window.height, de gehele body van de pagina.


[size=xsmall]Toevoeging op 24/08/2019 10:26:18:[/size]


loading = 0;
$(document).ready(function() {
//$('#merken').selectpicker();
     

winHeight = $('#product-listers').height();

$(window).scroll(function (event) {
     scrollPos = $(window).scrollTop(); 
//if (scrollPos + winHeight == $(document).height()) {
	console.log(scrollPos);
	console.log(winHeight);
	console.log(loading);
	if ( (scrollPos % winHeight == 0) && winHeight != null) {
	  loading++;
	  console.log('test');
	  //alert('test');
	  //doe async call, zet loading op false indien gereed
	}
});


Heb het zo opgelost. loading is de paginateller, omdat er per pagina een aantal resultaten worden geladen wanneer deze nog niet geladen zijn .
Maar dit lijkt niet te werken.

de hoogte van mijn elelemnt is 1250 pixels. Als dit vanaf de scrolltop berikt is dan doet hij een call, als het 2 x 1250 dus 2500 etc berekt heeft dus hij de tweede call etc etc.

Wat is hier fout?

[size=xsmall]Toevoeging op 24/08/2019 15:42:29:[/size]


loading = false;
if (!loading && (scrollPos + winHeight > 0.75 * $(document).height())) {
  loading = true;
  //doe async call, zet loading op false indien gereed
}


Dit werkt helaas niet, loading is false, maar word nooit geladen

Reageren

Inloggen om te reageren