浏览器缩放导致scrollTop不生效

功能

就是实现一个滚动表格，滚动到最下面就回到最头上重新滚动

这是一个简单的功能，用一个定时器去修改scrollTop就行了

环境

• vue：2.6.10
• 浏览器：

问题

scrollTop += 1不生效，但是+=2就生效，不理解，后来发现正常打开浏览器+=1也是生效的

这几次打开浏览器区别就是浏览器进行了缩放，第二次打开浏览器是没有进行缩放

根据猜想和同事的提议，浏览器缩放到50% +=2 也没用，然后得出结论

结论

scrollTop的+=最小值

最小值=1/浏览器缩放

这个最小值才会让scrollTop进行生效

但是我们最后给scrollTop赋值最好用整数，不然也会有不生效的问题

计算最小值

就是用1/浏览器缩放，然后向上取整

export function getBrowserZoom() {
 let ratio = 0,
  screen = window.screen,
  ua = navigator.userAgent.toLowerCase();
 if (window.devicePixelRatio !== undefined) {
  ratio = window.devicePixelRatio;
 } else if (~ua.indexOf('msie')) {
  // @ts-ignore
  if (screen.deviceXDPI && screen.logicalXDPI) {
   // @ts-ignore
   ratio = screen.deviceXDPI / screen.logicalXDPI;
  }
 } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
  ratio = window.outerWidth / window.innerWidth;
 }
 return ratio;
}

let number = 1 / getBrowserZoom();
number = Math.ceil(number)

最后

欢迎关注公众号致心空间：O(∩_∩)O😁