浏览器窗口缩小后,scrollTop +=1 赋值失败

336 阅读1分钟

✨ 效果图

scroll.gif

☀️ 需求

  • 实现列表自动滚动

💢 重现bug

  • 浏览器窗口缩放后,列表无法自动滚动

scroll02.gif

🕛 定位bug

列表容器的scrollTop获取一直为0

image.png

💥 解决

问题发生原因:浏览器缩放的时候,scrollTop + 1会被设置成 scrollTop + 1 * window.devicePixelRatio, 如果结果小于1就会被判定成+ 0, 所以需要保证每次变化的值大于1

原代码

document.getElementById("scroll").scrollTop += 1

修改后

document.getElementById("scroll").scrollTop += parseFloat((1 / window.devicePixelRatio).toFixed(2)) + 0.01