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

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

<!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>