verticale scrolling vanuit 1 element

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

PHP Developers gezocht die van complexe online vra

Vacature Omschrijving Een grote klant is opzoek naar enthousiaste PHP developers (junior/medior/senior). De organisatie waar jij komt te werken ontwikkelt en bouwt succesvolle oplossingen voor complexe online vraagstukken zoals performance, usability en conversion. Daarnaast zorgen zij voor externe systemen ingericht voor productbeheer, point-of-sales en voorraadbeheer koppelt de organisatie probleemloos aan op eigen Magento gebaseerde webshops. Het is een informele organisatie waar de communicatielijnen kort zijn. Functieomschrijving Met drupal 8 of ShopWare realiseert de organisatie prachtige frond-ends op dynamische data uit allerlei systemen. Je houdt je in deze organisatie bezig met het ontwerpen, ontwikkelen en beheren van functionaliteiten van de applicaties

Bekijk vacature »

Daniel van Seggelen

Daniel van Seggelen

24/08/2019 08:29:54
Quote Anchor link
Ik heb een element

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<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
 
PHP hulp

PHP hulp

15/09/2019 17:09:21
 
Rob Doemaarwat

Rob Doemaarwat

24/08/2019 09:10:37
Quote Anchor link
Ipv op
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
loading = false;
if (!loading && (scrollPos + winHeight > 0.75 * $(document).height())) {
  loading = true;
  //doe async call, zet loading op false indien gereed
}
 
Daniel van Seggelen

Daniel van Seggelen

24/08/2019 09:54:18
Quote Anchor link
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.


Toevoeging op 24/08/2019 10:26:18:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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?

Toevoeging op 24/08/2019 15:42:29:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
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
Gewijzigd op 24/08/2019 10:31:34 door Daniel van Seggelen
 
Thomas van den Heuvel

Thomas van den Heuvel

24/08/2019 17:20:40
Quote Anchor link
Ik heb een deja vu.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.