当前位置: 首页 > article >正文

overscroll-behavior-解决H5在ios上过度滚动的默认行为

1. 问题

开发H5的过程中,经常会有android和ios两边系统需要兼容的情况。在ios上一直有个问题是当H5内容触及到页面顶部或底部时,还是可以被人为的往下或往下拉动界面。当然可能有的情况是比较适用的,比如你往下拉动,然后在导航栏下显示“加载中”来刷新页面,但是业务的不同意味着有些H5是不需要这个功能的,但是H5在ios上还是默认可以往下拉动,在一些css要求比较高的静态页面的H5,就还得单独在最外层的div设置一个background-color来兼容整个页面的风格,不然假如页面整体风格为红色,但是被用户手动拉下后出现了一堆白色的背景,这肯定是不合适的。(不太懂说什么的看一看下面的示例图,然后可以去随便一个app试试,找找H5的页面看看)。

左图就是H5整体的颜色风格,右图是被用户手动拉下了页面区域后的状态,背景会显示咱们代码最外层div的颜色。当然最简单的方法给这里设置一个和颜色整体风格一致的颜色就可以。但咱们为了统一android和ios的操作一致,我们还是要想办法让用户在ios上当内容显示最顶层的时候不能再滚动了。

2. 解决 

有一个新的css属性可以解决这个问题:overscroll-behavior。 可以看看MDN对于该属性的解释:overscroll-behavior。

官方解释就比较容易理解了,之前说的那种行为称为“滚动链”,如果我们不需要这种行为,像是上面我们说的那种情况就可以使用overscroll-behavior-y: none来解决。

但是特别注意,该属性在ios16以上系统才使用。所以大家可以在开发H5的过程中可以和产品沟通这个事情,如果不希望出现滚动链效果,那么这个属性就派上用场了。


http://www.kler.cn/a/463105.html

相关文章:

  • 如何使用Termux 通过 SSH 连接到远程服务器
  • 深入理解 JVM 的垃圾收集器:CMS、G1、ZGC
  • 机场安全项目|基于改进 YOLOv8 的机场飞鸟实时目标检测方法
  • Flutter中的网络请求图片存储为缓存,与定制删除本地缓存
  • 安卓11 SysteUI添加按钮以及下拉状态栏的色温调节按钮
  • C++模板相关概念汇总
  • 茶叶连锁店管理系统(源码+文档+部署+讲解)
  • MySQL三大日志(binlog、redo log和undo log)详解
  • 职场常用Excel基础01-数据验证
  • LVGL部件篇: 开关部件(lv_switch)
  • 电商数据API接口的稳定性保障与性能优化策略
  • AI as a Platform (AIaaP) for Enterprises — 发展与转型
  • Go信号处理:如何优雅地关闭你的应用
  • 论文略读: Scaling laws with vocabulary: larger model deserve larger vocabularies
  • 科伦川宁生物:绿色科技引领,双翼齐飞筑梦未来
  • 深入聊聊typescript、ES6和JavaScript的关系与前瞻技术发展
  • 数据仓库中的指标体系模型介绍
  • nginx学习之路-windows系统安装nginx
  • 自学记录:学习HarmonyOS Location Kit构建智能定位服务
  • 【开源免费】基于SpringBoot+Vue.JS精准扶贫管理系统(JAVA毕业设计)
  • windows文件夹自定义右键调用powershell完成7zip加密打包
  • Mediatek Android13 ROM定制
  • springboot525基于MVC框架自习室管理和预约系统设计与实现(论文+源码)_kaic
  • Redis集成到SpingBoot 的数据结构常见操作
  • Facebook广告无法投放?查看原因与解决方案
  • ChatGPT实战100例 - (22) 影刀需求大师