android 手机上滚动监听器滞后的网站

Question

I made a website which has a listener for the scroll, and it does some css effects when things become in active view.我做了一个网站，它有一个滚动监听器，当事物进入活动视图时，它会产生一些 css 效果。

On my iPhone/Chrome it is working fine, but on Android/Chrome it is lagging past the sliding bars (2nd section).在我的 iPhone/Chrome 上它运行良好，但在 Android/Chrome 上它落后于滑动条（第 2 部分）。

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看这个网站直播 go 到http://kylebessemer.com

index.html索引.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 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...一些 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;
}

Answer 1

This was caused by two images not being optimized for mobile这是由于两个图像未针对移动设备进行优化造成的

android 手机上滚动监听器滞后的网站

问题描述

1 个解决方案

解决方案1
0 2022-09-14 23:42:22

android 手机上滚动监听器滞后的网站

问题描述

1 个解决方案

解决方案1 0 2022-09-14 23:42:22

解决方案1
0 2022-09-14 23:42:22