I made a website which has a listener for the scroll, and it does some css effects when things become in active view.
On my iPhone/Chrome it is working fine, but on Android/Chrome it is lagging past the sliding bars (2nd section).
I do not notice this problem on desktop.
Should I be using scroll listeners on mobile browsers? What is recommended?
To see this site live go to http://kylebessemer.com
index.html
<html>
<head>
<title>Kyle Bessemer - Full Stack Developer</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script>
</head>
<body>
<div class="parallax">
<div class="header">
<h1>I'm Kyle</h1>
</div>
</div>
<div class="slogan-box">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="slogan">a software engineer</div>
<div class="bar5"></div>
<div class="bar4"></div>
<div class="bar3"></div>
<div class="bar2"></div>
<div class="bar1"></div>
</div>
<div class="parallax2">
<div class="container reveal">
<h2>full stack development</h2>
<div class="text-container">
<div class="text-box">
<h3>frontend</h3>
<p>
Frontend web application development using Facebook's ReactJS (HTML, CSS, Javascript).
</p>
</div>
<div class="text-box">
<h3>backend</h3>
<p>
Backend rest api development using Python (Quart or Django), and Go (golang).
</p>
</div>
<div class="text-box">
<h3>mobile</h3>
<p>
Mobile application development using Google's Flutter (Dart).
</p>
</div>
</div>
</div>
</div>
<section>
<div class="container footer">
<div class="image-container">
<a href="https://www.linkedin.com/in/kyle-bessemer-606a7a1b2/" target="_blank"><img src="images/linkedin.png"/></a>
<a href="https://www.upwork.com/freelancers/~014216a82a164c76a0" target="_blank"><img src="images/upwork.png"/></a>
</div>
</div>
</section>
</body>
</html>
javascript
function scrolling() {
var reveals = document.querySelectorAll(".reveal, .slogan, .bar1, .bar2, .bar3, .bar4, .bar5, .footer");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", scrolling);
some css...
.reveal{
position: relative;
/* transform: translateY(300px); */
transform: scale(0.5) translate(-100%, 0%);
opacity: 0;
transition: 2s all ease;
}
.reveal.active{
/* transform: translateY(0); */
transform: scale(1) translate(0%, 0%);
opacity: 1;
}