网站大量收购闲置独家精品文档,联系QQ:2885784924

浅议内滚动布局.pdf

  1. 1、本文档共11页,可阅读全部内容。
  2. 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
浅议内滚动布局 一、什么是内滚动布局? 所谓 “内滚动布局 ”,顾名思义就是主滚动条在页面内部的布局,是相对于传统的 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 其

文档评论(0)

tianya189 + 关注
官方认证
内容提供者

该用户很懒,什么也没介绍

认证主体阳新县融易互联网技术工作室
IP属地上海
统一社会信用代码/组织机构代码
92420222MA4ELHM75D

1亿VIP精品文档

相关文档