在移动端 Web 中，我们经常会使用 -webkit-overflow-scrolling: touch 样式来实现可滚动区域的平滑滚动效果。然而，这个样式会影响到浏览器默认的 scroll 事件，导致 scrollTop 和 scrollLeft 属性无法正常工作。那么我们该如何获取当前滚动位置呢？本文将对此做出详细的解答，并提供一些示例代码以供参考。
为什么会出现这个问题？
当我们使用 -webkit-overflow-scrolling: touch 样式时，浏览器会将滚动事件交给渲染引擎处理，以实现更加流畅的滚动效果。但是，由于 scroll 事件是由浏览器自身处理的，因此在这种情况下，scrollTop 和 scrollLeft 属性不再能够直接获取滚动位置。
如何解决这个问题？
使用 scroll 事件的 targetTouches 属性
在滚动过程中，我们可以通过监听 touchmove 事件，并利用 event.targetTouches[0].pageY 或 event.targetTouches[0].pageX 来获取当前触摸点的位置。结合之前的滚动位置，即可计算当前的滚动位置。示例代码如下：
-- -------------------- ---- ------- ----- ------- - ---------------------------------------------- --- ------- --------------- -------------------------------------- ------- -- - ------ - ----------------------------- -------------- - ------------------ --- ------------------------------------- ------- -- - ----- ------ - ---------------------------- - ------- ----- --------- - -------------- - ------- ----------------------- ---
使用自定义事件
我们也可以使用自定义事件来获取当前的滚动位置。具体实现方式是，每当滚动发生变化时，触发一个自定义事件，并将当前的滚动位置作为事件的参数传递出去。示例代码如下：
-- -------------------- ---- ------- ----- ------- - ---------------------------------------------- -------- --------------------- - ----- ----- - --- --------------------- - ------- - ---------- ----------------- - --- ----------------------------- - ---------------------------------- -- -- - ---------------------- --- ------------------------------------- -- -- - ---------------------- --- --------------------------------- -- -- - ---------------------- --- ---------------------------------- ------- -- - ------------------------------------ --
总结
在使用 -webkit-overflow-scrolling: touch 样式时，我们无法直接获取到浏览器默认的 scrollTop 和 scrollLeft 属性。但是，我们可以通过监听 touchmove 事件或者使用自定义事件来获取当前的滚动位置。希望这篇文章能帮助您解决相关的问题，同时也希望您能在实际开发中多加实践，深入学习前端技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30844