</h1>

<p>
  
</p>
<p>
  ## Chrome 61 中 body.scrollTop 失效的原因
</p>
<p>
  在之前的 Chrome 版本中, 可以通过 body.scrollTop 来获取网页的滚动距离, 这一方法简单易用, 是前端开发人员获取滚动位置的常用方式之一. 然而, 在 Chrome 61 中, body.scrollTop 方法却失效了, 这给前端开发人员带来了新的挑战.
</p>
<p>
  body.scrollTop 失效的原因在于 Chrome 61 中对网页滚动事件的处理方式进行了更改. 在之前的版本中, 当用户滚动页面时, 浏览器会触发 "scroll" 事件, 并通过 body.scrollTop 方法获取滚动距离. 而在 Chrome 61 中, 浏览器不再触发 "scroll" 事件, 改为触发 "touchmove" 和 "wheel" 事件. 因此, body.scrollTop 方法便失效了.
</p>
<p>
  ## 如何解决 body.scrollTop 失效的问题
</p>
<p>
  为了解决 body.scrollTop 失效的问题, 前端开发人员可以采用以下两种方法:
</p>
<p>
  **1. 使用 window.pageYOffset 方法** 
</p>
<p>
  window.pageYOffset 方法是获取网页滚动距离的另一种方法. 该方法在 Chrome 61 中仍然有效, 并且可以兼容其他主流浏览器. 使用 window.pageYOffset 方法获取滚动距离的代码如下:
</p>
```javascript
// 获取网页的滚动距离
const scrollTop = window.pageYOffset;
```
<p>
  **2. 使用 document.documentElement.scrollTop 或 document.body.scrollTop 方法** 
</p>
<p>
  document.documentElement.scrollTop 和 document.body.scrollTop 方法也可以获取网页的滚动距离. 这两种方法在 Chrome 61 中都仍然有效, 但是兼容性不如 window.pageYOffset 方法. 使用 document.documentElement.scrollTop 或 document.body.scrollTop 方法获取滚动距离的代码如下:
</p>
```javascript
// 获取网页的滚动距离
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
```
<p>
  ## 结语
</p>
<p>
  Chrome 61 中 body.scrollTop 失效的问题已经成为前端开发人员需要面对的新挑战. 通过使用 window.pageYOffset 方法, document.documentElement.scrollTop 方法或 document.body.scrollTop 方法, 可以解决 body.scrollTop 失效的问题. 作为前端开发人员, 我们需要及时了解和掌握这些变化, 才能在前端开发中保持兼容性, 确保我们的网站在不同的浏览器中都能正常运行.
</p>