Bug演示 - IE下鼠标中轴滚动无效

无聊时发现了个好玩的东东,在IE下某种情况下会触发一个bug,此bug会导致鼠标中轴滚轮滚动无效。

触发条件:

  1. IE6+。
  2. 区域被绝对定位。
  3. 鼠标停留在非文字区域上。
  4. 区域背景透明
  5. 此区域背后的祖先标签背景透明

研究过程中发现第四个触发条件还有特殊条件。在IE6+下,html标签如果设置了背景,也是会产生bug.这个特点,在下面的例子可以体现出来。

下面是bug的示例,黄绿色区域为body标签背景,黑色区域为html标签背景。
由示例可看到几个现象:

  1. IE6+
  2. 第一区块位于body,将正常滚动。
  3. 第二个区域位于body与html间,鼠标停留在黄绿色区域(body)时滚动中轴,区块将正常滚动.但是停留在黑色区域(html)时滚动将失效。
  4. 第三个区域滚动完全失效。
  5. 第四个区域为区域本身加上了背景,也可以正常滚动。
当鼠标停留在黑色区域(html)滚动中轴的时候,我们发现滚动的并不是区块的滚动条,而是html标签的滚动条。

位于body

用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你

位于body,html间

用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你

位于html

用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你

加上背景后

用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你
用力撑开你