关于滚动和 touch 事件

全局滚动兼容

标准中使用 document.scrollingElement 获取滚动元素,这个 API 在 Chrom 和 Safrai 重视一直支持的,但是这个 API 不能做到很好地向前兼容。

(
document.scrollingElement

)

在 chrome 中
document.scrollingElement = document.documentElement = document.getElementsByTagName('html')[0] 这是符合 MDN 标准。document.body.scrollTop 始终返回 0

在 Safrai 中
document.documentElement = document.getElementsByTagName('html')[0] 并且 document.scrollingElement = document.body。 document.body.scrollTop 返回滚动距离 document.documentElement.scrollTop 不能用来获取滚动距离等于0

因此写了这样的兼容来获取最终的滚动容器

this.scrollElement = document.scrollingElement || document.body

滚动容器的说明
对 Webkit 来说,无论是混杂模式还是标准模式,它都认为页面滚动元素是 BODY;
而其它浏览器只有在混杂模式下,才会认为页面滚动元素是 BODY,标准模式下则是 HTML。这是 Webkit 一直就存在的 Bug。

部分内容引用自 https://imququ.com/post/document-scrollingelement-in-chrome.html

touch 事件兼容

  • 在 android 4.4以前的机器 webkit 对于 touchmove 滚动容器时有优化, touchmove 事件触发两次之后会调用 touchcancel 之后将不再触发 touchmove 事件,如果使用 e.preventDefualt 组织这种默认优化,内容将不会滚动。
  • 新版本的 chrome 内核中 在touchmove 事件中使用 e.preventDefault 将不再组织默认滚动行为。
  • 这是为什么大量的流行类库使用模拟滚动的原因。

ios & vivo 全局滚动 touch事件响应

使用全局滚动时,展示 fixed 定位的蒙层,touch 事件会在 document 上响应引起滚动。目前解决方案是将 body fixed 然后设置 top 固定,在蒙层关闭后滚动到指定位置。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,581评论 1 11
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,907评论 1 45
  • Window和document对象的区别 window对象window对象表示浏览器中打开的窗口window对象是...
    FConfidence阅读 2,288评论 0 5
  • 今天玩 antd-mobile 碰到一个滚动条的问题:在 Tab 组件中使用多个 ListView ,当操作第一个...
    BertFu阅读 30,677评论 7 9
  • 回到开头重新阅读 (作者ID: johnmclean) ”打啊!愣着干撒?“大哥大声吼着。”我......我......
    安锁阅读 272评论 0 1