今天我决定来讲讲一些具体的问题。上班到了第二个月，感觉工作压力和强度也不算很大，但是遇到了很多“名为经验”的小知识和小习惯。

今天讲的故事是这样的，我现在有一个页面，想做一个渐渐浮现起来的全局菜单，

• 菜单浮现前的css属性为


z-index: -1;
overflow:scroll; //因为菜单可能内容会多，这样可以滚屏下去找
opacity: 0;


• 点击菜单按钮后，更新的css属性为


z-index: 999;//一个很高的值，覆盖所有
opacity: 1; //可以添加个transition，有种渐渐浮现的效果。


• html结构大致是这样


<div class="menu"></div>
<div class="main"></div>


问题来了，突然发现，在android上一切正常，而在iOS上出现了页面无法滚动的问题，或者觉得滚得很不顺。（我没有iPhone。。。别人发现的）

我探索了好久才发现可能跟菜单有关系，因为我先滑动一下屏幕，页面没有动静，但是点开菜单，里面的内容却是已经滑动过的了。

后来将点击按钮前的菜单的overflow属性先设置成hidden，等到浮现后才打开scroll，果然没有了这个问题。

出现这个问题是因为我想当然以为scroll这个动作会在鼠标区域中的z-index最高的部分先进行，结果iOS中可能是从文档顺序较前或者较高的位置进行触发的，所以先触发了z-index较低位置的事件。

所以除了z-index和滚动需要警惕之外，还有一点是，最好就是尽就避免用z-index做这个效果，不出现的内容就把高度宽度降到0，这样就算是overflow:scroll的一个元素，鼠标或者接触点发生scroll的位置根本不会影响到这个元素。

上述的问题真实存在，原因纯属猜测，没有经过仔细求证，敬请指正。