首页 > 其他 > 详细

overscroll-behavior 禁止橡皮筋效果

时间:2019-06-19 14:44:52      阅读:106      评论:0      收藏:0      [点我收藏+]

目前尚兼容性不好

文章摘自:https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior 

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

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

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

/* Global values */
overflow: inherit;
overflow: initial;
overflow: unset;

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

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

初始值 auto
适用元素 non-replaced block-level elements and non-replaced inline-block elements
是否是继承属性
适用媒体 visual
计算值 as specified
Animation type discrete
正规顺序 the unique non-ambiguous order defined by the formal grammar

语法

overscroll-behavior 属性可以使用下面列表中的一或两个关键字指定。

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

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

 

overscroll-behavior 禁止橡皮筋效果

原文:https://www.cnblogs.com/hoopriver/p/11050904.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!