当浏览器缩放时，scrollTop不生效

沈清秋.

已于 2023-06-15 09:55:52 修改

阅读量968

点赞数

分类专栏： CSS 文章标签： javascript css

于 2023-06-15 09:53:40 首次发布

原文链接：https://blog.csdn.net/m0_50015961/article/details/127589042

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

当浏览器窗口缩放至80%，在Chrome中scrollTop+1操作可能无效，因为实际增加值小于1会被判定为0。原因是增量乘以window.devicePixelRatio可能小于1。解决方案是根据浏览器类型（如火狐与Chrome）调整增量，确保在Chrome中每次增加大于1的值。

摘要由CSDN通过智能技术生成

问题

当浏览器缩小到80%也就是浏览器分辨率大于1920*1080的时候，scrollTop++功能不生效。会发现scrollTop + 1 的时候其实值并没有发生变化。

原因

这是由于 scrollTop + 1 的时候实际上是 1 * window.devicePixelRatio ，如果结果小于1那么就会被判定是+ 0，所以要根据浏览器分辨率去判断，确保每次加的实际值是大于1的。

解决

if (navigator.userAgent.indexOf('Firefox') >= 0) {
	this.navigatorPx = 2;
} else {
	this.navigatorPx = 1;
}
this.rollPx = parseFloat((this.navigatorPx /  window.devicePixelRatio).toFixed(2) + 0.05 )// + 0.05 为了保证 ratio >= 1
 
divDom.scrollTop += this.rollPx;