本文讨论了在移动端Web App中使用-webkit-overflow-scrolling:touch属性在iOS设备上可能引发的问题。当该属性应用于容器元素时，可能导致固定定位元素在滚动时失去定位效果，以及下拉菜单背景透明的异常情况。解决方案包括避免在滚动容器上定位元素，以及调整下拉面板的布局来防止背景透明问题。
现在很多移动端网站都是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前后：
最低0.47元/天 解锁文章
扫一扫
2696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
