使用js定时器的元素持续向上滚动效果及谷歌浏览器缩小时不滚动问题

最近要写消息持续向上滚动效果，记录下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        height: 25px;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="demo" style="height: 100px; background-color: green; overflow: hidden">
      <div id="demo1">
        <p>一个元素的高度1</p>
        <p>一个元素的高度2</p>
        <p>一个元素的高度3</p>
        <p>一个元素的高度4</p>
        <p>一个元素的高度5</p>
      </div>
      <div id="demo2"></div>
    </div>
    <script>
      let speed = 50;
      let tab = document.getElementById("demo");
      let tab1 = document.getElementById("demo1");
      let tab2 = document.getElementById("demo2");
      tab2.innerHTML = tab1.innerHTML;
      function func() {
        //使用offsetHeight和scrollHeight在本例中效果相同
        // if (tab.scrollTop >= tab1.offsetHeight) {
        if (tab.scrollTop >= tab1.scrollHeight) {
          tab.scrollTop = 0;
        } else {
          tab.scrollTop += 1;        
        }
        console.log("offsetHeight", tab1.offsetHeight);
        console.log("scrollHeight", tab1.scrollHeight);
        console.log("scrollTop", tab.scrollTop);
      }
      let timer = setInterval(func, speed);
     
    </script>
  </body>
</html>

Edge 和 firefox 浏览器缩放 25%-500% 运行良好，符合需求，然而 chrome 浏览器缩放比例小于 80% 时会停止滚动。产生此问题的原因是，scrollTop 增加的值小于 1 时，scrollTop 值保持不变，因此滚动停止。因此关键问题就是要保证 scrollTop 增加的值大于1。

查找资料，发现系统有个 设备像素比 的参数，修改代码如下，解决了 chrome 浏览器缩放比例小于 80% 时会停止滚动的问题，浏览器缩放比例 25% 时速度最快，500% 时速度最慢。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        height: 25px;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="demo" style="height: 100px; background-color: green; overflow: hidden">
      <div id="demo1">
        <p>一个元素的高度1</p>
        <p>一个元素的高度2</p>
        <p>一个元素的高度3</p>
        <p>一个元素的高度4</p>
        <p>一个元素的高度5</p>
      </div>
      <div id="demo2"></div>
    </div>
    <script>
      let speed = 50;
      let tab = document.getElementById("demo");
      let tab1 = document.getElementById("demo1");
      let tab2 = document.getElementById("demo2");
      tab2.innerHTML = tab1.innerHTML;
      function func() {
        //使用offsetHeight和scrollHeight在本例中效果相同
        // if (tab.scrollTop >= tab1.offsetHeight) {
        if (tab.scrollTop >= tab1.scrollHeight) {
          tab.scrollTop = 0;
        } else {
          // tab.scrollTop += 1;
          tab.scrollTop += parseFloat((1 / window.devicePixelRatio).toFixed(4)) + 0.1;
        }
        console.log("offsetHeight", tab1.offsetHeight);
        console.log("scrollHeight", tab1.scrollHeight);
        console.log("scrollTop", tab.scrollTop);
      }
      let timer = setInterval(func, speed);

      window.addEventListener("resize", () => {
        console.log("window.devicePixelRatio", window.devicePixelRatio);
      });
    </script>
  </body>
</html>
posted @ 2023-08-30 10:29  carol2014  阅读(177)  评论(0)    收藏  举报