IE78 Scroll Bug

简介

当我们使用overflow创建一个scroll区域时，在某种情况下，IE78并不能通过鼠标滚轮来滚动非“内容区”。
注意，并不是说scroll bar滚动条出现异常，而是指在例如margin产生的空白区等“没有实际内容”的区域，无法“通过鼠标滚轮”来滚动。

Step.1

假设我们要实现下面的效果，首先我们可以选择最简单的结构，将图片设置为outer的背景图，里面直接填充内容子块，设置outer的overflow即可。
如果图片不足以满足大屏或全屏，我们可以通过设置background-size:100% 100%;或一侧100%一侧auto来拉伸。亦或者补充background-color一个纯色来补充不拉伸情况下产生的空白区域。

Step.2

然而IE78并不支持background-size属性，当我们需要达到同样效果时，则需要将背景图作为一个图层绝对定位在最底部。
所以我们试着将结构将变为.outer > img + .block*N
但是此时滚动时，非我们想要的效果。

Step.3

于是我们试着给内容添加一层包裹.inner，并将overflow的滚动状态迁移至.inner层上，即滚动条来自inner对自己内容的滚动。
为了方便中间不同的内容元素宽度全部限定同样，我们可以添加一个。content层来包裹他们。当然此处的content层也可以根据需要来选择是否增删。 现在是不是觉得已经完成了我们的预期效果呢？没错，你可以试着滚动一下滚轮或是拖拽滚动条。
但是遗憾的是，你需要打开一下IE78（或IE11仿真台）试着使用滚轮滚动却无法滚动。在滚动content区域时间歇发生滚动。

Step.4

根据前面的情况，我们可能猜测到例如z层级等关系导致，但是那都是无济于事的。
这里我们猜测一下content是处于居中的，是否可能是两侧margin的空白区无法正常滚动呢。
我们试着给content层添加一个红色背景来便于观看。
你发现了什么，content内容区能正常滚动，两侧才不可以。嗯哼？没错。

Step.5

那我们考虑一下是否可以将content的宽度铺满就可以完成该效果了呢。设置.content的宽度为100%试试。
没错，滚起来了呢！

Step.6

那我们再试着把用于标色的content背景色去掉。—— 坑爹呢这是！
推翻前面所有可能的猜测，我们必须换个角度来想想了，或者你可以制作一个更为简单的模型来测试它。
之后你会发现，似乎一切在于这个背景色的设置与否！
没错，我们猜测到这个bug真正可能的原因，即IE78中scroll的滚轮滚动，需要滚动的是它光标所在位置的最高空间层（z-index）上是否存在可以scroll的元素。（scroll滚动的时候永远是先滚动z-index更靠前的元素）
这个“元素”，可以是颜色，但是不能为transparent色值。我们再试着加上另外一个色值在inner层上，你会发现它也会滚动（此时content的宽度可以不必设置为满宽）。

Step.7

既然如此，我们再把content去掉精简层级，inner作为包裹层之间包裹每个子块。
但是我们的inner可能并不能设置颜色，而可能存在背景的各个block元素并不能均占到100%宽，我们依旧需要通过给inner设置背景来处理这个bug。
我们考虑给inner添加一个1px*1px的透明图作为背景（并未设置平铺）,这样不会对设计稿产生额外的影响。
好了，现在它依旧正常的滚了起来。与step6比起来，我们不难猜测，scroll触发的并不是实际上光标所在的点要有“实际元素”，也可以理解成非空的background渲染了一层layout，即使这个背景图只有1px的实际空间，但绘制它的background的层却是整个装载容器元素的大小。

总结

根据前面不难总结，当需要使用overflow创建的BFC在IE78下使用滚轮在任意位置滚动时，需要该BFC中有一个full层，这个层我们可以设置其中的某一个full box的背景为一张空白图来解决此bug。或者当其本身如果有背景时，则不会出现此bug。
故我们可以选择注意将图片放置在合适的层作为背景来避免此bug，或添加一个blank.gif来解决此bug。