现在很多移动端网站都是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前后：
原本的结构是：下拉面板和“全部分类”那个div是兄弟元素，在 react 中通过箭头状态控制显示隐藏。
但是加了-webkit-overflow-scrolling后，在苹果上，位于商品div上的下拉面板背景变透明了。。。哈哈哈哈
好吧，我一边看英格兰大战瑞典一边各种尝试，发现确实是-webkit-overflow-scrolling导致的坑。
solution：将下拉面板移动到“全部分类”那个div里边，并通过absolute定位top:100%;left:0;就解决了。
事实上，现在也很少看到mobile站用这种下拉方式，真要下拉也是将下边的内容整体下移，比如凤凰和sohu:
记个坑。怪自己too young too naive