关于滚动和 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 固定，在蒙层关闭后滚动到指定位置。