Ilość elementów widocznych na ekranie

Question

Jak w js pobrać ilość wszystkich elementów tylko tych widocznych na ekranie bez tych poza marginem

Mam coś takiego https://codepen.io/KingShadow/pen/gxGYBW i chciałbym zliczać ilośc tych okładek które są aktualnie widoczne na ekranie. Z góry dzięki :)

Comments

Na przykład pętla po elementach i sprawdzanie, których property HTMLElement.offserLeft jest mniejsze niż 0 lub większe niż szerokość elementu rodzica.

Answer 1

Korzystając z podpowiedzi Krzycho92 napisałem Ci to:

 

w zmiennej counter to masz tu dopisane:

https://codepen.io/anon/pen/WEZNGY?editors=1111

lub sam wklej:

let counter = 0;
let el = document.querySelectorAll('.polaroid');
[].forEach.call(el, function(i) {
	if(i.offsetLeft >= 0 && i.offsetLeft < document.body.offsetWidth) {
		counter++;
	} 
});

 

Comments

Metoda querySelectorAll zwraca obiekt NodeList, który zawiera wbudowaną metodą forEach więc nie ma potrzeby robienia "sztuczki" z metodą call. Można po prostu od razu wywołać:

el.forEach( i => {
    //coś robimy z każdym elementem...
} );

Ewentualnie jeśli potrzeba by innych metod, które są w Array.prorotype to można użyć po prostu składni:

let el = [...document.querySelectorAll('.polaroid')];

i mamy el.filter, el.map, el.includes itd.