overscroll-behavior称为“滚动链”
overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。
默认情况下,当触及页面顶部或者底部时(或者是其他可滚动区域),移动端浏览器倾向于提供一种“触底”效果,甚至进行页面刷新。你可能也发现了,当对话框中含有可滚动内容时,一旦滚动至对话框的边界,对话框下方的页面内容也开始滚动了——这被称为“滚动链”。
在某些情况下我们不想要这些表现,使用 overscroll-behavior 来去除不需要的滚动链,以及类似 QQ 一类的应用下拉刷新效果。
语法
overscroll-behavior 属性可以使用下面列表中的一或两个关键字指定。
使用两个关键字来指定 overscroll-behavior 分别在 x 和 y 轴的值。只用一个值的话,x 和 y 轴都被指定为该值。
overscroll-behavior: [ contain | none | auto ]{1,2}
auto:默认效果
contain:设置这个值后,默认的滚动边界行为不变(“触底”效果或者刷新),但是临近的滚动区域不会被滚动链影响到,比如对话框后方的页面不会滚动。
none:临近滚动区域不受到滚动链影响,而且默认的滚动到边界的表现也被阻止。
扫二维码查看滚动行为示例
我们展现一个虚构的联系人全页列表,和一个包含聊天窗口的对话框。
正常情况下在聊天窗口边界之前都可以使用滚动条,但是当滚动到边界之后,其后的联系人窗口也将开始滚动,这并不是我们满意的效果。可以在聊天窗口中使用 overscroll-behavior-y (overscroll-behavior 也可以) 就像如下:
.messages {height: 220px;overflow: auto;overscroll-behavior-y: contain;
}
我们也希望移除标准的滚动至顶部或底部的滚动特效(例如Android上的Chrome当滚动超过顶部边界时会刷新页面),可以通过在 元素设置 overscroll-behavior: none 来阻止这个行为:
body {margin: 0;overscroll-behavior: none;
}
overscroll-behavior称为“滚动链”相关推荐
- CSS Overscroll Behavior Module Level 1
编者按:本文作者奇舞团前端开发工程师何文力,同时也是 W3C CSS 工作组成员. 6 月 6 日,W3C 发布了第一份滚动溢出行为工作组草案 CSS Overscroll Behavior Modu ...
- 04 【布局之Overscroll Behavior 定位偏移量】
1.布局-Overscroll Behavior overscroll behavior 用于控制浏览器到达滚动区域边界时的行为的功能类.这个属性可以用来防止在有多个滚动区域的页面中出现不必要的滚动. ...
- Flutter的滚动以及sliver约束
Flutter框架中有很多滚动的Widget,ListView.GridView等,这些Widget都是使用Scrollable配合Viewport来完成滚动的.我们来分析一下这个滚动效果是怎样实现的 ...
- 移动端滚动穿透与滚动溢出解决方案
滚动穿透 滚动穿透.gif 问题描述 在移动端 WEB 开发的时候(小程序也雷同),如上录屏所示,如果页面超过一屏高度出现滚动条时,在 fixed 定位的弹窗遮罩层上进行滑动,它下面的内容也会跟着一起 ...
- 蒙层禁止下方页面滚动防抖动完美方案
文章目录 学习链接 前言 蒙层禁止页面滚动的方案 实现 body hidden touch preventDefault body fixed 解决js 禁止滚动条滚动,并且滚动条不消失,页面大小不闪 ...
- 黑帽SEO之暗链方法大全,那种最好,不易被蜘蛛搜索引擎察觉
暗链也称为 黑链 ,即隐蔽链接 hidden links,是黑帽SEO的作弊手法之一.在早期的SEO优化中,黑链是最有效最迅速的方法之一:但是现在百度算法已经对iframe和display:none ...
- 区块链技术背后的运行逻辑
链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载. 区块链技术可能是自互联网技术以来最伟大的发明.区块链可以在不需要有中央权威机构的情况下或不需要双方信任的情况下交换价值或 ...
- 一文读懂公有链、私有链、联盟链
链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载. 区块链中公有链.私有链.联盟链都是区块链技术的一个细分,而技术仅仅是一种工具,怎么在不同的场景应用好不同的工具才是技术进 ...
- 40行python开发一个区块链
链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载. 尽管有人认为区块链目前还是个不成熟的解决方案,但它无疑称得上是计算机发展历史上的一个奇迹.但是,到底区块链是什么呢? 我 ...
最新文章
- python爬虫流程-Python爬虫入门
- Cassandra 常见错误索引
- gitee提交代码_在Gitee获8.5k Star,做微信小程序商城看这一个开源项目就够了
- Linux查看所有用户和组信息
- 浙江大学计算机与机械工程,中国26所“机械工程”大学经调整、合并,浙大、西交、同济升级...
- 初烧盲狙一条铁三角e40
- OpenSSL编写SSL,TLS程序
- fastjson生成json时Null属性不显示
- 用习惯了windows系统要怎样去认识linux系统(三)
- MongoDB find方法
- python调用msf_使用python操纵metasploit简单小记
- stm32单片机学习笔记(模块学习一——舵机SG90)
- 导入以及导入模板下载
- Photoshop CC2019安装教程
- 计算机怎么发音乐,有哪些方法可以把歌曲发送到远方的朋友的手机上?
- java tps 优化_高tps下,java性能调优
- 【总线】一文看懂 UART 通信协议
- 方舟怎么查看服务器信息,方舟怎么查看登录过的服务器 | 手游网游页游攻略大全...
- Final Cut Pro X for Mac(FCPX专业视频剪辑软件) v10.4.6中文特别版
- 潜入培训机构,顺出来一份价值 2.2W 的 Python 人工智能大纲
热门文章
- 踢掉 Docker 后,Kubernetes 还能欢快地跑 GPU?
- 中国首枚芯片邮票问世;苹果开源 Swift System | 极客头条
- “云”话数字经济:2020 腾讯全球数字生态大会定档 9 月!​
- CSDN 七夕包分配,最后一天啦!
- 万亿美元软件浪潮来临,开发者是核心!
- 瑞幸咖啡 CEO 和 COO 被暂停职务;快手起诉抖音索赔 500 万元;Wine 5.8 发布 | 极客头条...
- 从 Pod 到案例,给小白的 Kubernetes 技术课
- 如何轻松了解 Python 必学的 django 框架?
- 如何搞懂容器的核心技术点?
- 软件正在吞噬整个世界?!