Als van het element een bepaald aantal pixels in beeld is

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ben Pastoor

Ben Pastoor

28/10/2020 09:42:59
Quote Anchor link
Hoi hoi,


Ik zit met een vraagstuk waar ik graag wat hulp bij zou willen hebben.
Met een simpele Javascript code word bepaald of een element zich in de viewport bevind.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<script type="text/javascript">
    var elem = document.getElementById("result");
    var bounding = elem.getBoundingClientRect();
        if (bounding.top >= 0 && bounding.left >= 0 && bounding.right <= window.innerWidth && bounding.bottom <= window.innerHeight) {
            alert('in viewport');  
        }
</script>


Dit stukje code bevind zich in een onscroll event.

Dit werk, maar alleen als een element totaal in beeld is (100% dus). Ik zoek eigenlijk een oplossing die check wanneer er zich ook maar 1 pixel zicht in de viewport bevind en die je dan d.m.v. van een parameter kan instellen. (Check of er 30 pixels zichtbaar zijn of check of er 21 pixels zichtbaar zijn...)


Wie o wie kan mij helpen?
 
PHP hulp

PHP hulp

28/03/2024 13:53:24
 
Rob Doemaarwat

Rob Doemaarwat

28/10/2020 12:06:28
Quote Anchor link
Je kijkt nu of de "top" in beeld is, terwijl je eigenlijk wilt weten of de "bottom" in beeld is (= top + height). Even heigth en width op de juiste plek optellen dus.

Overigens is er tegenwoordig ook de IntersectionObserver die dit veel "beter" voor je doet (niet zelf rekenen + minder "CPU intensief").
 



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.