-webkit-overflow-scrolling引起的bug

本文讨论了在移动端Web App中使用-webkit-overflow-scrolling:touch属性在iOS设备上可能引发的问题。当该属性应用于容器元素时,可能导致固定定位元素在滚动时失去定位效果,以及下拉菜单背景透明的异常情况。解决方案包括避免在滚动容器上定位元素,以及调整下拉面板的布局来防止背景透明问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

现在很多移动端网站都是web mobile app,UI是类app的样子,首页大体可以分两类:

    一种是顶部-容器-底栏结构。手指上下滑动时内容在容器内滚动。容器设定了高度。

    一种是遵循传统的流式布局,底部栏用fixed定位在底部,有的站点是在特定时机显现(流式布局坑少一些)。

我的demo暂且按第一种布局,主页div存放商品内容,上下滑动没有滚动动画效果。这时候自然想到有个

-webkit-overflow-scrolling:touch

加在需要滚动的div上即可。在现在的安卓机上没问题,但是在苹果上会有一些奇怪的负效应。

1.去年折腾的时候,发现用了position:fix将元素定位在加了-webkit-overflow-scrolling:touch的容器上方时,如果上下滚动容器内容,定位的元素会跟着容器内容一起往上或往下滚动,在滚动动画期间失去了fix定位的效果。

solution:那时候在外网找了很久资料一一实验,最后同意了一些开发者的看法:解决这个问题的最好方法就是规避这个问题,即不要在设置了-webkit-overflow-scrolling:touch的容器上定位元素。后来两度与几个公司的前端交流,mobile上苹果尽量少用fixed,要用的话往往也使用一些hack技巧。

2.今天遇到另一个问题,现在我demo页面布局如下,因为觉得“白菜优选”app做得不错,模仿其主页下拉菜单:


加了-webkit-overflow-scrolling前后:

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值