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

讲到这里就不得不说点题外话，很多人会遇到移动端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();

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

无法滚动的弹出层

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

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