IE78 Scroll Bug

STEP.

next

简介

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

Step.1

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

Step.2

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

Step.3

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

Step.4

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

Step.5

那我们考虑一下是否可以将content的宽度铺满就可以完成该效果了呢。设置.content的宽度为100%试试。
没错,滚起来了呢!
内容区域
内容区域
内容区域
内容区域
内容区域
less base on lesslab

Step.6

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

Step.7

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

总结

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