Looking to add scrolling functionality with animation to a child div on my webpage? Check out this example.
I attempted using JavaScript's on scroll function, but it didn't work as expected. Currently, I have it set up to trigger on click of certain cards, but ideally, I would like it to activate when the div is scrolled.
This example module represents just one part of my website; there is content both before and after it. Essentially, this module sits in the center of the site.
Here is some sample code I tried:
function scrollFunc() {
alert("is this working properly?");
document.getElementById("platform-cards").style.backgroundColor = "black";
document.getElementById("cards-main-div").style.display = "none";
document.getElementById("card-info-div").style.display = "block";
}
html code
<div class="cards" onscroll="scrollFunc()">
</div>
and another attempt:
const cardMainDiv = document.querySelector('.cards-main-div');
cardMainDiv.addEventListener('scroll',(e)=> {
alert("it is working....")
// EVEN ALERT IS NOT WORKING
document.getElementById("platform-cards").style.backgroundColor = "black"
document.getElementById("cards-main-div").style.display = "none"
document.getElementById("card-info-div").style.display = "block"
});
html code
<div class="cards">
</div>
<div class="card-info-div" id="card-info-div">
</div>