【前端】记录一则关于浏览器缩放导致功能失效的问题

项目上需要一个列表滚动功能，用的是element Plus，功能很简单，获取到el-table的内容dom，给个循环定时器，隔一段时间给dom.scrollTop + 1px

    function autoScroll(stop) {
      nextTick(() => {
        const tableDom = tableRef.value.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0] // 获取el-table内容dom元素

        timer.value = setInterval(() => {
          if(tableDom) {
            tableDom.scrollTop += 1 // 每100ms滚动1px距离
            if(tableDom.clientHeight + tableDom.scrollTop === tableDom.scrollHeight) {
              tableDom.scrollTop = 0 // 滚动到最底端重置到开始位置
            }
          }
        }, 100)
      })
}

功能实现，自动滚动，运行一段时间也没问题 直到某天早上，自动滚动功能失效，一顿调式 tableDom.scrollTop的值在计算前后都为0，这就很奇怪了 在一顿冥(bai)思(du)苦(gu)想(ge)之后,看到这样一条信息

切到内部电脑一看，果不其然，浏览器比例缩小，恢复到100%后，功能再次恢复正常

那么问题是如何产生的呢？

原来当浏览器缩放时 scrollTop + 1，的计算方式是 1 * window.devicePixelRatio，如果计算结果小于1，则直接赋值0

知道问题出在哪里就好办了，判断window.devicePixelRatio是否小于1，如果小于1，scrollTop累加的步长就设置大一点

完美解决，BUG总是以一种意想不到的方式出现，又以一种奇怪的方式解决