浅议内滚动布局.pdf

浅议内滚动布局 一、什么是内滚动布局？ 所谓 “内滚动布局 ”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的 html 滚动而言的 ，例如，下图所示滚动条，是从头部下方开始： 传统的页面滚动，基本上是相对于整个浏览器窗体，例如， QQ 视频首页： 二、为什么会有内滚动布局？ 随着显示器设备越大越宽越密，以及现代 web 技术的发展。 web 站点已经开始有了从传统的瀑布式 网页向类桌面软件风格站点转变的趋势。比方说， QQ 音乐的首页目前是这样子的： 以后可能就会变成这样子： 纳尼，这不就是现在的“ QQ 音乐软件界面截图？ ”“这位同学眼神很犀利，没错，这就是有着全国最 大的正版高质量乐库的 QQ 音乐 PC 版截图 ”。 我们可以局部放大，会发现，是个实打实的内滚动布局。 不仅是 QQ 音乐，其他很多桌面软件都是这种内滚动布局，比方说 QQ 软件管家等等。 有此可见，一旦强交互的传统 web 页面桌面软件化，内滚动布局是绕不开的一堵墙，了解之还是很 有必要的。 三、如何实现内滚动布局？ 既然是内滚动，就有必要干掉浏览器原生 html 的滚动条，这个很简单： html { overflow: hidden; } 然后呢？“ ”我想了想，好像然后就没有 然后“ ”了，让一个 div容器滚动就完事了。 然而，事非经过不知难，原理虽然简单没说头，但是细节操作还是有些上手成本的。 为了更好理解，我们拿实例说话。最近半年一直在参与企业 QQ 账户中心改版的项目，你可以看成 是企业后台管理系统。这里有几个关键字，一是 企业 ，二是 管理系统 。 企业 这里为什么要强调是 企业“ ”呢？因为企业产品的用户一般都是购买了企业 QQ 产品的企业的员工，有 一定 IT 技能的人。因此，用户的浏览器的现代感就比 Qzone 用户强不少。下图为同事在 2015-05-20 这个爱意满满的日子拉的 userAgent 数据： 如果我们将支持 CSS3 animation 的浏览器称之为现代浏览器，可以发现，企业产品的 用户， 70%~80% 的用户都是使用的现代浏览器。亲们，近 8 成 的用户都是使用现代浏览器，这就意 味着，企业产品其实可以作为现代 web 技术的试验田，在为用户提供更好体验更高质量产品的同时 ，为日后其他产品的现代化改造提供了宝贵的借鉴经验。而本文的内滚动布局，就是万千经验中的 一小个。 管理系统 管理系统“ ”意味着站点以强交互为主，会有很多类似办公软件的交互操作在里面。如果是更偏重浏 览的站点，例如企业 QQ 官网，显然，传统的垂直瀑布式的网站是更适合的，滚动浏览，再滚动， 再浏览。但是，企业管理系统如此庞大，操作如此频繁，交互如此之多，传统的上下式网站显然很 难让用户用得非常得心应手。下图为以前企业 QQ 账户中心组织结构页面（测试页面）的真容： 看着此页面，立马让我想起了 6 年前刚毕业那会的青葱岁月，那时候的页面的基本上就是这样的 调调，小小的空间里有着小小的世界。时代发展，再辉煌的过去，如果没有改变，终将会被埋汰。 正是由于以上两点，设计师设计的时候，大胆创新，设计成了 全屏自适应 、半响应 、类 PC 软件风 格 (内滚动 ) 的管理站点，下图为上面老页面同样数据的新测试页面截图： 回到内滚动布局本身。 新版企业账户中心全站，顶部以及左侧固定，不跟随滚动，右侧主体内滚动，如何实现呢？ 由于企业产品不用管 0.4% 的IE6 用户，因此，事件就变得简单地多了。我们可以利用绝对定位元素 的拉伸特性，使内滚动容器高度自适应匹配。 HT ML 主结构示意如下： body — page — header — side — content 其