浅议内滚动布局的概念与实现方法

基本上，是个像样的web2.0网站都会有弹框web组件，一个黑色半透明的overlay层，上面摇曳着弹框面板，例如这样的：

对于黑色半透明覆盖层，传统实现是这样的：如果要兼容IE6浏览器，一般是absolute绝对定位，高度由JS计算赋予；如果不需要管IE6, 则可以使用fixed固定定位。

然而，在内滚动布局下，“赏”就出来了，就算需要兼容IE6浏览器，黑色半透明高宽100%自适应覆盖也不需要任何JS计算的帮助，也不需要监听window的resize事件，直接CSS就可以搞定。很简单：

.overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

为啥一行CSS就能搞定所有场景？因为使用的是内滚动布局，如下图示意，屏幕就这么高，滚动在里面，自然自适应：

看上去是内滚动布局带来的一个小小的“赏”，但是，实际上，埋下了一个不小的“罚”。

随意改变滚动容器最大的问题在于，当存在覆盖层的时候，会影响背后页面内容的滚动。

100%尺寸的position:absolute/fixed的覆盖层，会覆盖任何非元素(包括)(包括这些元素的滚动条)，因此，只要覆盖+滚动容器改变，页面就无法滚动。

内滚动布局是典型的改变浏览器默认滚动容器的布局，自然覆盖层一出现，就没法滚动。不过这也没什么，对吧，弹框出现时候，页面背景没法滚也挺好的。

但是，麻烦的事情是，如果弹框自身高度很高，却又没法滚动呢(浏览器可用高度700像素，弹框有900像素高)？

传统布局下的弹框，如果高度很高，直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是，在内滚动布局下，弹框根本就不在滚动容器里面，翻滚一说从何谈起？

大危机！怎么办！？

我们新版企业账户中心就遇到这个问题，我是这么解决的——overlay和dialog合体。

合体与滚动

合体是什么意思呢？基本上，90%+的弹框组件，半透明覆盖层overlay和弹框dialog是两个并列的兄弟关系的独立的元素，这种设计的好处在于overlay组件可以复用。实际上，我们要实现一个弹框效果，只要一层div标签就可以了，核心就是使用兼容的RGBA背景色技巧，然后弹框HTML放在里面：

.container {
    position: absolute; top: 0; left: 0; bottom: 0; width: 100%;
    background-color: rgba(0,0,0,.5);
    filter: progid:DXImageTransform.Microsoft.gradient
(startcolorstr=#7F000000,endcolorstr=#7F000000);
    overflow: auto;
}
:root .container {
    /* IE9 无 filter */
    filter: none;
}

HTML结构示意如下：

<div class="container">
    <dialog></dialog>
</div>

（编辑：网站开发网_安阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!