当前位置: 首页 > 科技观察

关于内滚动布局的讨论

时间:2023-03-14 23:18:11 科技观察

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结构如下:

/div>这时候弹框就在一个可以滚动的容器里了,妈妈再也不用担心我滚不开心了!5.结语由于传统的表单滚动已经深入人心,我们可能会觉得内滚动布局似乎有点坑;但是,如果内部滚动布局是世界,我们应该如何看待新兴的表单滚动布局?那么,从产品的角度来看,在这样一个频繁运营的重交互项目中,内滚动布局带来的交互体验提升,远大于经验不足带来的额外开发成本。相信这种形式的交互和网页布局的创新,一定会带来很多积极的反馈和积极的影响,产品即将推出,我们拭目以待。内部滚动布局更加现代和移动。如果你的项目合适,不妨试试这种看似新颖的布局方式。感谢阅读,欢迎交流!来源:腾讯ISUX(http://isux.tencent.com/inner-scroll-layout.html)