关于前端:页面滚动默认行为那些事一

浮层滚动，带动底层滚动

若不心愿底层滚动

• 能够用 preventDefault 阻止浏览器默认行为
  通过监听 touchstart、touchmove、touchend 事件，判断滑动是在滚动元素内则进行滚动，否则阻止默认滚动行为。
  在 参考文章 1 作者形象了一个简略的办法（带源码，可参考）

  $.smartScroll(container, selectorScrollable);

• 应用 css 新属性 overscroll-behavior 设置滚动到边界的行为
  
  PS：overscroll-behavior 是较新的 css 属性，目前看还需思考兼容性和局限性问题。比方“滚动区”内容不多，没呈现滚动条的时候，此属性并不能阻止默认滚动的。（参考文章 3 ）

挪动 Web 滚动性能优化: Passive event listeners

Passive event listeners是 2016 年 Google I/O 上提出的，是为了晋升页面滑动的晦涩度。

对于 Passive 更具体背景和阐明可查阅 参考文章 2 ，这里简要介绍一下。

咱们在滑动页面的时候触发了 touch 相干事件，开发者能够通过 preventDefault 来阻止滑动行为，浏览器须要期待绑定事件执行完（假如耗时 200ms），才晓得，“哦～原来你没有阻止默认行为，好的，我马上滚”，这样就导致 滑动晦涩度 上有提早。

而 passive 作用是开发者能够提前通知浏览器，我不调用 preventDefault 阻止事件默认行为，浏览器就能够疾速生成事件行为，从而晋升页面性能。

当初大部分支流浏览器都提供了对 passive 的原生反对。

在最新的 DOM 标准中，事件绑定的第三个参数变成了对象：

target.addEventListener(type, listener[, options]);

options里传入 passive:true 就是明确通知浏览器，该事件不会调用 preventDefault 来阻止默认滑动行为。

参考

• 1、web 挪动端浮层滚动阻止 window 窗体滚动 JS/CSS 解决（张鑫旭）
• 2、挪动 Web 滚动性能优化: Passive event listeners（知乎）
• 3、overscroll-behavior 的应用及局限性（CSDN）