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

发布时间：2016-10-18 16:21:12 所属栏目：策划来源：腾讯ISUX

导读：副标题#e# 本文来聊聊可能成为未来流行趋势的内滚动布局，从基础介绍、实现方法到几个关键问题都有细致的教程。一、什么是内滚动布局？所谓内滚动布局，顾名思义就是主滚动条在页面内部的布局，是相对于传统的滚动而言的，例如，下图所示滚动条，是从头部

合体是什么意思呢？基本上，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>

（编辑：PHP编程网 - 黄冈站长网）

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

5/6

首页

尾页