javascript或者css怎么实现这样的滚动效果

Question

1. 如图 ，途中有一个灰色的区域，里面放满了头像 ， 当头像过多 将会产生滚动条。
2. 但是 在这些头像中，即是这个灰色的容器中间显示一个固定的一个红色区域，它不会跟随滚动。
3. 并且它不是覆盖在头像这一层之上，即是说头像滚动时需要自动避开中间的红色区域，如同红色区域是一个障碍物一样
4. 这些头像是向上 向左对齐

怎么用css或则js实现这一布局呢？

最终实现的效果应该如下的：

Answer 1

使用js来写，根据滚动条高度，来判断红色区域所在位置

比如你上面的图，把所有的头像当成一个集合，红色区域是一个个体，头像一行有12个，当滚动条高度为0时，红色区域所在位置为12*2+3，当滚动条高度为n时，红色区域所在位置为12*(2+parseInt(n/100))+3(这里假设你头像的高度及内外边距为100)

Answer 2

你说的红色区域完全可以用CSS样式实现上下左右居中的啊，父元素设置position:relative；红色区域position:absolute；margin:auto；top:0；bottom:0；left:0；right:0；滚动条就设置对应元素overflow:auto；，你说的从上到下从左到右的头像可以用float:left；实现，也可以用行内元素自己的特性做

Answer 3

红色区域相对于灰色区域绝对定位，脱离文档流，再垂直居中。