1.什么是内滚动布局？所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，相对于传统的滚动而言。比如下图的滚动条是从头部底部开始的：传统的页面滚动基本上是相对于整个浏览器窗口的，比如QQ视频首页：2、为什么会有内滚动布局？随着显示设备的更大、更宽和更密集，以及现代网络技术的发展。网站已经开始从传统的瀑布式网页转变为类桌面软件风格的网站。比如QQ音乐的首页，目前是这样的：以后可能会变成这样：“娜妮，这不是现在QQ音乐软件界面的截图吗？”这是QQ音乐PC版的截图，拥有国内最大的正版优质曲库。”我们可以局部放大，会发现是真正的内滚动布局。不仅仅是QQ音乐，还有很多其他的桌面软件也有这种内滚动布局，比如QQ软件管家等等。由此可见，传统强交互网页的桌面软件一旦变成软件，内滚动布局就是免不了的一堵墙，还是有必要了解一下。3.如何实现内滚动布局？既然是内滚动，就要干掉浏览器原生的滚动条，很简单：html{overflow:hidden;}“然后呢？”我想了想，好像没有“然后”，让一个div容器滚动起来就可以了。不过，这个过程之后的难处就不好说了。虽然原理简单明了，但是详细的o操作仍然有一些入门成本。为了更好地理解，让我们用例子来谈谈。这六个月，我一直在参与企业QQ账号中心的改版项目，也算是企业后台管理系统。这里有几个关键词，一个是企业，一个是管理体系。#p#1。企业为什么在这里强调“企业”？因为企业产品的用户一般都是购买了企业QQ产品的企业员工，具有一定IT技能的人。因此，用户浏览器的现代性要比Q空间用户强很多。下图是2015年5月20日充满爱的一天同事拉取的userAgent数据：如果我们把支持CSS3动画的浏览器称为现代浏览器，可以发现70%~80%的用户企业产品的用户是使用现代浏览器。各位朋友，近80%的用户使用现代浏览器，这意味着企业产品其实可以作为现代网络技术的试验田。在为用户提供更好体验和更高品质产品的同时，也为未来其他产品的开发提供了基础。现代化提供了宝贵的经验教训。本文的内滚动布局只是万千体验中的一小部分。2、管理系统“管理系统”是指站点以强交互为主，里面会有很多类似于办公软件的交互操作。如果是更注重浏览的站点，比如企业QQ官网，显然，传统的垂直瀑布流网站更适合，滚动浏览，再滚动，再浏览。但是，企业管理系统如此庞大，操作如此频繁，交互如此之多，显然很难让用户非常得心应手地使用传统的上下网站。下图为原企业QQ账号中心组织架构页面（测试页面）的真实样貌：看着这个页面，立刻让我想起了6年前刚毕业的青春岁月。当时的页面基本上就是这样的跳跳，小空间里有小世界。随着时代的发展，无论过去多么辉煌，如果不改变，终究会被埋葬。由于以上两点，设计师在设计时大胆创新，设计了一个全屏自适应、半响应式、类PC软件风格（内滚动）的管理站点。下图是新的测试页面，数据和上面的旧页面一样。屏幕截图：回到内部滚动布局本身。新版企业账户中心全站，顶部和左侧固定，不跟随滚动，右侧滚动在主体内部，如何实现？由于企业产品不关心那0.4%的IE6用户，事件就变得简单多了。我们可以利用绝对定位元素的伸缩特性，让内部滚动容器的高度自适应。主要的HTML结构如下：body--page--header--side--content其中page扮演传统页面
的角色。这是一种预留设计，防止多个结构相似的页面同时出现在一个页面上，以满足某些功能或交互体验的需要。或者这样说，把页面的所有内容都放在一个页面里。这时候页面就像一座可以移动的房子。以后跳槽到腾讯的时候，房子是可以带的，原来的位置可以换成别的房子。但是，如果直接放在中，由于只能是一个，不动产，此时做整体迁移比较困难，而且项目也差不多成型了，全局修改的成本是高风险。但凡事都有两面性，这样折腾可以减少你白发的数量，因为你会因为过度劳累而直接脱掉头发。页面相关CSS如下：.page{position:absolute;top:0;right:0;bottom:0;left:0;}应该很好理解，绝对定位，全屏拉伸，相当于：.page{position:absolute;top:0;left:0;width:100%;height:100%;}由于节省了几个字节，我放弃了IE6，使用了上面的方法。对于fixedheader或者fixedside，可以使用语义明确的position:fixed定位，也可以直接使用position:absolute，因为滚动容器和它们在同一层级，所以absolute其实就是fixed效果。说到这里，不得不说一点题外话。很多人都会遇到定位position:固定在移动端的底部输入框的头痛。如何解决？就是使用本文介绍的内滚动布局，然后在底部使用position:absolute来模拟固定效果。代码方面也是拉伸拉伸：.header{height:62px;position:absolute;top:0;right:0;left:0;}.side{width:200px;position:absolute;top:62px;bottom:0;left:0;}最后是高能内容，还是老套路：.content{position:absolute;top:62px;right:0;bottom:0;left:200px;overflow:auto;}主要内容就是所有的播放内容。这样就形成了一个自适应浏览器窗口的内部滚动布局，同时具有高度和宽度。4.内滚动布局的奖惩让我们站在上帝的角度来看内滚动布局，本质上就是滚动容器的迁移和功能的分布。所以大多数情况下，和我们平时玩页面的方式没什么区别。不过，江山毕竟易主，分歧还是存在的。最简单的例子是对滚动事件的影响。很多滚动插件，包括以前的脚本，我们可能是这样写的：$(window).scroll(function(){//跟我一起滚，骚年...});但是在内滚动布局下，由于滚动容器不是窗体，不是元素，上面的滚动事件八个生命周期都不会执行。我们需要调整，因为现在，页面的主滚动条是.content，所以我们可以：$(".content").scroll(function(){//跟我一起滚，又骚年...});#p#你认为事情就此结束了吗？太天真了！以前我们的滚动条是靠近浏览器的上边缘的，但??是既然变成了内滚动，滚动条就和网站常用的header的下边缘对齐了。这会造成什么问题？即一些offset的计算会发生一些变化。比如我们想让表头操作区有一个类似position:sticky的效果，就是视口一起滚动，快滚出来的时候fixed是固定的，不跟随。此时我们的最大滚动高度值需要考虑到网站页眉的高度（传统形式滚动不需要，因为该值为0）：varmaxScrollTop=$("#tableHeader").offset().top-$(".header").height();以上，我们可以称之为“改变”，与原来的实现相比，它没有任何作用，一个改变，一个转移。事实上，内卷布局也会带来一些质变的特点。Unscrollablepop-uplayer基本上一个像样的web2.0网站都会有一个pop-upwebcomponent，一个黑色的半透明覆盖层，上面摇曳着弹出面板，比如这样：对于一个黑色半透明覆盖，传统的实现方式是像这样：如果要兼容IE6浏览器，一般都是absolute绝对定位，高度由JS计算给定；如果不需要控制IE6，可以使用fixed固定定位。但是，在内滚动布局下，“奖励”就出来了。即使需要兼容IE6浏览器，黑色半透明高宽100%自适应覆盖也不需要任何JS计算的帮助，也不需要监听窗口的resize事件。直接CSS就可以搞定。很简单：.overlay{position:absolute;left:0;top:0;width:100%;height:100%;}为什么一行CSS可以搞定所有场景？因为使用了内滚动布局，如下图，屏幕这么高，在里面滚动，自然是自适应的：看起来是内滚动布局带来的小“奖励”，但是，在其实，掩埋是不小的“惩罚”。随意改变滚动容器最大的问题是，当有覆盖时，会影响后面页面内容的滚动。100%大小的position:absolute/fixedoverlay会覆盖任何非元素（包括）（包括这些元素的滚动条），所以只要overlay+scroll容器发生变化，页面就无法滚动。内滚动布局是一种典型的改变浏览器默认滚动容器的布局。一旦出现自然叠加，就无法滚动。不过还好，对吧，出现弹框的时候页面背景不能滚动就好了。但是，麻烦的是，如果弹框本身的高度很高，但是无法滚动怎么办（浏览器可用高度是700像素，而弹框的高度是900像素）？如果传统布局中的弹框高度很高，直接设置弹框容器position:absolute就可以愉快的上下滚动了。但是，在内滚动布局下，弹框根本不在滚动容器中，那么滚动是从哪里来的呢？大危机！该怎么办！？我们在新版企业账户中心遇到了这个问题，我是这样解决的——overlay和dialog的结合。fit和rollfit是什么意思？基本上90%+的弹框组件，半透明覆盖层和弹框对话框都是两个平行兄弟关系的独立元素。这种设计的好处是覆盖组件可以被复用。其实我们要实现弹框效果，只要一层div标签就可以了，核心是使用兼容RGBA背景色技术，然后把弹框HTML放在里面：.container{position:绝对；顶部：0；左侧：0；底部：0；宽度：100%；背景色：rgba(0,0,0,.5)；过滤器：progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);overflow:auto;}:root.container{/*IE9无过滤器*/filter:none;}HTML结构如下：