I have following code
let cardwrap = document.querySelectorAll(".portfolio-posts .t-entry-visual")
window.addEventListener("scroll", () => {
var top = window.pageYOffset / 62;
cardwrap.style.transform = 'translate3d(0px, ' + top + 'px, 0px)';
});
And my HTML
<div class="portfolio-posts">
<div class="t-entry-visual"></div>
<div class="t-entry-visual"></div>
<div class="second-visual"></div>
<div class="t-entry-visual"></div>
</div>
When I use querySelector I got the transform style working on the first .t-entry-visual element. But when I use querySelectorAll it doesn't apply the style on any element while I want the transform style applied on all .t-entry-visual elements.
You have to iterate through it using forEach because querySelectorAll doesn‘t return an element but a collection of elements.
let cardwrap = document.querySelectorAll(".portfolio-posts .t-entry-visual");
window.addEventListener("scroll", () => {
var top = window.pageYOffset / 62;
cardwrap.forEach(function(elmt) {
elmt.style.transform = 'translate3d(0px, ' + top + 'px, 0px)';
});
});
See also: