MENU

overscroll-behavior

2022 年 01 月 11 日 • 阅读: 257 • 学习笔记

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

语法

属性

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

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

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

语法形式

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

禁用下拉刷新 pull-to-refresh

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

body {
    overscroll-behavior-y: contain;
}

禁用炫光和回弹效果

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

body {
    overscroll-behavior-y: none;
}

禁用左右滑动的手势导航

body {
    overscroll-behavior-x: none;
}

MDN:overscroll-behavior

添加新评论

|十年之约

本网站由提供CDN加速/云储存服务