overscroll-behavior特殊场景的应用

前言

简单介绍一下 overscroll-behavior 的一些应用场景。例如 Mac 左右滚动误触返回，部分区域滚动到底部触发连锁反应等等。

overscroll-behavior

overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法，让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。

默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”。

在某些情况下我们不想要这些表现，使用 overscroll-behavior 来去除不需要的滚动链，以及类似 QQ 一类的应用下拉刷新效果。

/* 关键字的值 */
overscroll-behavior: auto; /* 默认 */
overscroll-behavior: contain;
overscroll-behavior: none;

/* 使用 2 个值 */
overscroll-behavior: auto contain;

解释：

auto 默认的滚动溢出行为表现的和正常一样。

contain
默认的滚动溢出行为将被内部的元素观察到，(例如：“bounce”效果或者刷新)，但是相邻的区域不会产生连续滚动效果，例如：在下面的元素不会被滚动。

none 相邻的滚动区域不会有连续滚动效果，并且默认的滚动溢出行为会被阻止。

应用一：解决 Mac 左右滚动误触返回事件

// 阻止 
 document.body.style.overscrollBehaviorX = 'none'
// 恢复 
document.body.style.overscrollBehaviorX = 'auto'

建议在 body 上使用，如上，有效果，假如在弹窗 div 里面使用，可能无效，我们就要考虑其他方式解决。
如下方式：

const element = document.getElementsByClassName('haorooms_contain')[0];
  element.addEventListener('mousewheel', function(event) {
  // 滚动到右边的最大宽度
  var maxX = this.scrollWidth - this.offsetWidth;

  // 如果这个事件看起来要滚动到元素的边界之外，要阻止它
  // 其中一个是滚动到最左边，一个是滚动到最右边
  if (this.scrollLeft + event.deltaX  maxX) {
    // 阻止事件
    event.preventDefault();}
}, false);

应用二：禁止滚动链

可以直接在需要禁止的 div 上面添加样式就可以了

.haorooms_container {overscroll-behavior-x: none;}