Check wanneer een gebruiker voorbij een element is gescrolled

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Full Stack Developer Industriële Automatiseri

Raster levert slimme industriële automatiseringsoplossingen aan nationale en internationale opdrachtgevers voor wie procesveiligheid van groot belang is. We zijn sterk in spraakmakende one-off projecten in de productie- en procesautomatisering waarbij extreme engineering een terugkerend thema is. Daarbij kun je denken aan: Het veilig en duurzaam ontwerpen, plaatsen én weer opruimen van olie- en gas- productieplatformen De transformatie van de olie- en gasmarkt naar windenergie op zee Het oplossen van lokale parkeerproblematiek in dichtbevolkte steden Het cyber secure maken van kritische industriële productieomgevingen Het op afstand veilig produceren door onbemande platformen op de Noordzee Het succesvol lanceren van satellieten in de

Bekijk vacature »

Snelle Jaap

Snelle Jaap

07/10/2021 16:33:06
Quote Anchor link
Ik wil graag controleren wanneer een gebruiker voorbij de bovenkant van een bepaald element heeft gescrolled.

Momenteel heb ik dit:

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$(window).on('load', function() {
  let elembestellen = document.querySelector('#bestellen');
  var bestellen = elembestellen.getBoundingClientRect().top;
  let eleminformatie = document.querySelector('#informatie');
  var informatie = eleminformatie.getBoundingClientRect().top;
  let eleminspiratie = document.querySelector('#inspiratie');
  var inspiratie = eleminspiratie.getBoundingClientRect().top;
  let elemreviews = document.querySelector('#reviews');
  var reviews = elemreviews.getBoundingClientRect().top;

  $(window).scroll(function(){
    w = Math.floor( $(window).scrollTop());

    if(window.outerWidth > 767) {
      // console.log(bestellen);

      if(  (w > parseInt(bestellen))  && (w < parseInt(informatie))     ){
        console.log('#bestellen reached');
      }

      if(  (w > parseInt(bestellen))  && (w > parseInt(informatie)) && (w < parseInt(inspiratie))    ){
        console.log('#informatie reached');
      }

      // if(  (w > parseInt(bestellen))  && (w > parseInt(informatie)) && (w > parseInt(inspiratie)) && (w < parseInt(reviews))   ){
      //   console.log('inspiratie');
      // }

      // if(w > parseInt(informatie)){
      //   console.log('informatie');
      // }

    }
  });
});


Het probleem is dat '#bestellen reached' goed wordt gelogged wanneer ik de pagina laad als ik helemaal naar boven ben gescrolled. Maar als ik een beetje naar beneden scroll en de pagina ververs dan wordt '#bestellen reached' niet meer goed getoond, de log wordt al veel te vroeg zichtbaar ver voordat ik bij het element ben aangekomen.

Hoe komt dat? Hoe kan ik ervoor zorgen dat de if statements true worden wanneer voorbij de bovenkant van het element is gescrolled, hoe de pagina ook geladen is (geladen met scrollbar tegen de bovenkant, of geladen halverwege de page etc).
 
PHP hulp

PHP hulp

09/12/2021 05:55:50
 
Rob Doemaarwat

Rob Doemaarwat

07/10/2021 17:39:51
Quote Anchor link
En kun je zien welke variabele de "verkeerde waarde" heeft (anders dan bij de "begin bovenaan" refresh)?

Sowieso is dit soort "onscroll" spul tegenwoordig niet meer nodig (Google heeft er ook een hekel aan, omdat je constant code zit te vuren). We hebben nu de Intersection Observer (eenmalig aangeven wanneer je een seintje wilt ontvangen - via callback, en dan gewoon afwachten)!
Gewijzigd op 07/10/2021 17:40:13 door Rob Doemaarwat
 
Ad Fundum

Ad Fundum

08/10/2021 09:19:03
Quote Anchor link
Handig Rob, ik wist nog niet van het bestaan en vermoed dat ik het nog wel eens nodig kan gaan hebben. Bedankt!
 
Snelle Jaap

Snelle Jaap

08/10/2021 09:39:25
Quote Anchor link
Klinkt goed, ik had daar nog nooit van gehoord. Veel cleaner om het daarmee te maken!
 



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.