技巧杂烩 · 

overscroll-behavior

使用overscroll-behavior来防止目标区域的滚动触发父元素的滚动,在支持的操作系统中,当滚动到容器的末端时,保留” 反弹” 效果。

语法

属性

  • overscroll-behavior
  • overscroll-behavior-x
  • overscroll-behavior-y

使用两个关键字来指定overscroll-behavior分别在xy轴的值。只用一个值的话,xy轴都被指定为该值。

  • auto 默认效果
  • contain 设置这个值后,默认的滚动边界行为不变(“触底” 效果或者刷新),但是临近的滚动区域不会被滚动链影响到,比如对话框后方的页面不会滚动。
  • none 临近滚动区域不受到滚动链影响,而且默认的滚动到边界的表现也被阻止。

语法形式

plain text

[ contain | none | auto ]{1,2}

禁用下拉刷新 pull-to-refresh

禁用原生的下拉刷新效果,只需要在 body 或 html 元素添加:

css

body {
    overscroll-behavior-y: contain;
}

禁用炫光和回弹效果

将属性设为 none,可以禁用默认的滚动边界效果。

css

body {
    overscroll-behavior-y: none;
}

禁用左右滑动的手势导航

css

body {
    overscroll-behavior-x: none;
}

MDN:overscroll-behavior

overscroll-behavior

creative commons