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

讲到这里就不得不说点题外话，很多人会遇到移动端position:fixed的底部输入框定位的头疼问题，如何解决？就是使用本文介绍的内滚动布局，然后底部使用position:absolute模拟fixed效果。 

代码方面，同样就是拉伸拉伸：

.header { height: 62px; position: absolute; top: 0; right: 0; left: 0; } .side { width: 200px; position: absolute; top: 62px; bottom: 0; left: 0; }

最后就是高能的content, 还是一样的套路：

.content { position: absolute; top: 62px; right: 0; bottom: 0; left: 200px; overflow: auto; }

主体内容全部都在content里面玩耍。于是，一个高宽均自适应浏览器窗体的内滚动布局就成型了。

四、内滚动布局的赏与罚

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

但是，毕竟江山易主，差异还是存在的。最简单的例子就是对滚动事件的影响。很多滚动插件，包括以前的脚本，我们可能都是这么写的：

$(window).scroll(function() { // 跟我一起翻滚吧，骚年…… });

但是，在内滚动布局下，由于滚动的容器不是window窗体，不是元素，因此，上面滚动事件八辈子都不会执行。我们需要调整，由于现在，页面的主滚动条是.content, 因此，我们可以：

$(".content").scroll(function() { // 跟我一起翻滚吧，骚年 again…… });

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

此时，我们的最大滚动高度值，就需要把网站头部的高度考虑进去（传统窗体滚动不需要，因为值是0）：

var maxScrollTop = $("#tableHeader").offset().top - $(".header").height();

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

无法滚动的弹出层

基本上，是个像样的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合体。

合体与滚动

（编辑：应用网_丽江站长网）

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