今天需要实现一个简单的功能，在用户阅读完“用户协议”后，即将“用户协议”的滚动条拖到最底下，才将同意按钮置为可点击状态。

前置知识回顾

简单看下面的图，回顾一下 scrollHeight / scrollTop / clientHeight 三个概念

需求实现

可以看到，当 scrollHeight === clientHeight + scrollTop 时，则滚动条触底，以Vue为例，关键代码如下

<template>
	<div class="agreement" @scroll="scrollAgreement">
          <!-- 主体内容 -->
	  <div class="agree-btn" :class="{enabled: clickable}">同意</div>
	</div>
</template>
<script>
...
scrollAgreement(e){
  this.clickable= e.target.scrollHeight === (e.target.scrollTop + e.target.clientHeight)
},
...
</script>

存在问题

页面缩放

上面的代码看上去很简单，也没有问题。但当用户将浏览器缩放了以后，上面的代码就失效了。

原因是随着页面被缩放，scrollTop 将发生变化，上述等式的逻辑就不成立了。

其实这个缩放变量，是可以读到的，就是window.devicePixelRatio ，如上图的150%缩放，window.devicePixelRatio 将等于1.5 。

所以需要改一下上面的代码：

...
scrollAgreement(e){
  this.clickable = e.target.scrollHeight * window.devicePixelRatio
        - (e.target.scrollTop + e.target.clientHeight) * window.devicePixelRatio === 0
},
...

缩放精确度

还有一个问题，上面的window.devicePixelRatio不是一个精确的值，比如当缩放是90%时，window.devicePixelRatio 的值是0.8999999761581421 。所以上面的代码还要再稍稍调整一下。

...
this.clickable = Math.abs(e.target.scrollHeight * window.devicePixelRatio
        - (e.target.scrollTop + e.target.clientHeight) * window.devicePixelRatio) > 1
...

求一下两个值的差值的绝对值，相差小于1像素即可。

参考：

www.zhangxinxu.com/wordpress/2…