Check wanneer een gebruiker voorbij een element is gescrolled

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Full Stack Developer Industriële Automatiseri

Raster wordt continu betrokken bij complexe en baanbrekende projecten in industriële automatisering. Ons team is gespecialiseerd in productie automatisering en proces automatisering projecten waarin procesveiligheid een belangrijk aspect is. Ons compact en groeiend OX (Operational Excellence) team ontwikkelt, configureert en levert support op zelfontwikkelde applicaties waarmee onze klanten hun productieprocessen slimmer, sneller, goedkoper en veiliger maken. Operational Excellence wordt zichtbaar gemaakt in resultaten. Bij bedrijven met dezelfde strategie, zal een operationeel excellent bedrijf een lager operationeel risico, lagere operationele kosten hebben en relatief meer winst maken. Het Raster OX team laat haar klanten de resultaten behalen door hun eigen procesdata

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

20/10/2021 05:40:44
 
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.