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 < 0 ||
this.scrollLeft + event.deltaX > maxX) {
// 阻止事件
event.preventDefault();
}
}, false);
应用二:禁止滚动链
可以直接在需要禁止的div上面添加样式就可以了
.haorooms_container {
overscroll-behavior-x: none;
}