-webkit-overflow-scrolling引起的bug

现在很多移动端网站都是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做得不错，模仿其主页下拉菜单：