问答

如何在 Safari 上获取用户的滑动位置?

作者:admin 2021-05-07 我要评论

背景需求: 用户在移动设备上滑动页面时,在结束滑动的位置播放一个动画。 当前进展: 我添加了 touch 三个事件的监听,在 end 里获取到了结束滑动的坐标,实现...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

背景需求:
用户在移动设备上滑动页面时,在结束滑动的位置播放一个动画。

当前进展:
我添加了 touch 三个事件的监听,在 end 里获取到了结束滑动的坐标,实现了这个效果。
但是在 Safari 上,当你轻轻滑动页面,或者在一次滑动结束完全前,再次滑动,touch 相关事件不触发,只触发 scroll 事件。但是 scroll 事件无法获取准确坐标,所以无法正确播放动画。

已经实验过的操作:

  1. 给 body 和 html 加 -webkit-overflow-scrolling: auto,不生效。因为动画的元素是追加到 body 的。
  2. 在 touchend 里加入 preventDefault ,不生效。而且会产生 because scrolling is in progress and cannot be interrupted. 这个问题。

这个问题发生在 iOS 12 及以上版本,安卓没问题。

参考:
iOS 相关的 release notes
MDN -webkit-overflow-scrolling

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 如何在 Safari 上获取用户的滑动位置?

    如何在 Safari 上获取用户的滑动位置?

  • mouseenter为什么不用事件冒泡?

    mouseenter为什么不用事件冒泡?

  • 如何固定一个按钮到底部

    如何固定一个按钮到底部

  • python 中插入数据库

    python 中插入数据库

腾讯云代理商
海外云服务器