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

大宛网络（前进网站建设）按：今天小编来聊聊可能成为未来网页设计流行趋势的内滚动布局，从基础介绍、实现方法到几个关键问题都有细致的教程，实打实的技术干货，想试试这个类型的同学别放过了(*^__^*)>>>

所谓“内滚动布局”，顾名思义就是网站主滚动条在页面内部的布局，是相对于传统的滚动而言的。

随着显示器设备越大越宽越密，以及现代前进网站建设技术的发展。web站点已经开始有了从传统的瀑布式网页向类桌面软件风格站点转变的趋势。有此可见，一旦强交互的传统web页面桌面软件化，内滚动布局是绕不开的一堵墙，了解之还是很有必要的。

既然是内滚动，就有必要干掉浏览器原生的滚动条，这个很简单：html { overflow: hidden; }

“然后呢？”我想了想，好像然后就没有“然后”了，让一个div容器滚动就完事了。然而，事非经过不知难，原理虽然简单没说头，但是细节操作还是有些上手成本的。

我们站在上帝视角审视一下前进网站建设内滚动布局，本质上就是滚动容器的迁移，职能下发。所以绝大部分情况下，跟我们平常玩转页面的路数没什么区别。

但是，毕竟江山易主，差异还是存在的。较简单的例子就是对滚动事件的影响。

你以为事情就这么完了吗？太天真了！以前我们的滚动条是跟浏览器上边缘是靠在一起的，但是，自从变成了内滚动，滚动条是跟网站公用头部下边缘排排站，这会造成什么问题呢？就是一些offset的计算要发生一些变化。举个例子，我们希望表格头部操作区域有类似position:sticky效果，也就是视区内一起翻滚，要被滚出去的时候，fixed固定，不跟随。

以上这个，我们可以称之为“变化”，与原本的实现相比无功无过，一种变化一种转移。实际上，内滚动布局还会带来带有质变性质的一些特性。

无法滚动的弹出层

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

对于黑色半透明覆盖层，传统实现是这样的：如果要兼容IE6浏览器，一般是absolute绝对定位，高度由JS计算赋予；如果不需要管IE6, 则可以使用fixed固定定位。然而，在内滚动布局下，“赏”就出来了，就算需要兼容IE6浏览器，黑色半透明高宽100%自适应覆盖也不需要任何JS计算的帮助，也不需要监听window的resize事件，直接CSS就可以搞定。

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

看上去是内滚动布局带来的一个小小的“赏”，但是，实际上，埋下了一个不小的“罚”。随意改变滚动容器较大的问题在于，当存在覆盖层的时候，会影响背后页面内容的滚动。100%尺寸的position:absolute/fixed的覆盖层，会覆盖任何非元素(包括)(包括这些元素的滚动条)，因此，只要覆盖+滚动容器改变，页面就无法滚动。内滚动布局是典型的改变浏览器默认滚动容器的布局，自然覆盖层一出现，就没法滚动。不过这也没什么，对吧，弹框出现时候，页面背景没法滚也挺好的。但是，麻烦的事情是，如果弹框自身高度很高，却又没法滚动呢(浏览器可用高度700像素，弹框有900像素高)？

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

大危机！怎么办！？

合体与滚动：

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

由于前进网站建设传统窗体滚动已经深入人心，所以我们可能会觉得内滚动布局似乎有些坑；但是，如果当年是内滚动布局天下，我们又该如何看待新兴的窗体滚动布局呢？然后，从产品的角度讲，前进网站建设内滚动布局在操作如此频繁的重交互项目中所带来的交互体验上的改进，要远比经验不足带来的额外开发成本要大很多很多。

我相信，这种交互形式以及web布局上的创新一定会为前进网站建设带来很多正面的反馈和积极的影响，产品即将上线，我们可以拭目以待。内滚动布局，更现代，更移动，如果您的项目合适，不妨也试试这种看似新颖的布局方式。

欢迎阅读前进网站建设更多精彩内容，来看更精彩的网页设计风格：http://www.nyweixin.com/！