UI设计：浅议内滚动布局

06月

271 0 0

所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的滚动而言的

　　一、什么是内滚动布局？

　　例如，下图所示滚动条，是从头部下方开始：

　　传统的页面滚动，基本上是相对于整个浏览器窗体，例如，QQ视频首页：

　　二、为什么会有内滚动布局？

　　随着显示器设备越大越宽越密，以及现代web技术的发展。web站点已经开始有了从传统的瀑布式网页向类桌面软件风格站点转变的趋势。比方说，QQ音乐的首页目前是这样子的：

　　不仅是QQ音乐，其他很多桌面软件都是这种内滚动布局，比方说QQ软件管家等等。

　　有此可见，一旦强交互的传统web页面桌面软件化，内滚动布局是绕不开的一堵墙，了解之还是很有必要的。

　　三、如何实现内滚动布局？

　　既然是内滚动，就有必要干掉浏览器原生的滚动条，这个很简单：

html { overflow: hidden; }

　　如果我们将支持CSS3 animation的浏览器称之为现代浏览器，可以发现，企业产品的用户，70%~80%的用户都是使用的现代浏览器。亲们，近8成的用户都是使用现代浏览器，这就意味着，企业产品其实可以作为现代web技术的试验田，在为用户提供更好体验更高质量产品的同时，为日后其他产品的现代化改造提供了宝贵的借鉴经验。而本文的内滚动布局，就是万千经验中的一小个。

　　2. 管理系统

　　“管理系统”意味着站点以强交互为主，会有很多类似办公软件的交互操作在里面。如果是更偏重浏览的站点，例如企业QQ官网，显然，传统的垂直瀑布式的网站是更适合的，滚动浏览，再滚动，再浏览。但是，企业管理系统如此庞大，操作如此频繁，交互如此之多，传统的上下式网站显然很难让用户用得非常得心应手。下图为以前企业QQ账户中心组织结构页面(测试页面)的真容：

　　看着此页面，立马让我想起了6年前刚毕业那会的青葱岁月，那时候的页面的基本上就是这样的调调，小小的空间里有着小小的世界。时代发展，再辉煌的过去，如果没有改变，终将会被埋汰。

　　正是由于以上两点，设计师设计的时候，大胆创新，设计成了全屏自适应、半响应、类PC软件风格(内滚动)的管理站点，下图为上面老页面同样数据的新测试页面截图：

　　回到内滚动布局本身。

　　新版企业账户中心全站，顶部以及左侧固定，不跟随滚动，右侧主体内滚动，如何实现呢？

　　由于企业产品不用管0.4%的IE6用户，因此，事件就变得简单地多了。我们可以利用绝对定位元素的拉伸特性，使内滚动容器高度自适应匹配。HTML主结构示意如下：

body
- -- page
  - -- header
    - -- side
      - -- content

　　此时，我们的最大滚动高度值，就需要把网站头部的高度考虑进去(传统窗体滚动不需要，因为值是0)：

var maxScrollTop = $(#tableHeader).offset().top - $(.header).height();

　　对于黑色半透明覆盖层，传统实现是这样的：如果要兼容IE6浏览器，一般是absolute绝对定位，高度由JS计算赋予；如果不需要管IE6, 则可以使用fixed固定定位。

　　然而，在内滚动布局下，“赏”就出来了，就算需要兼容IE6浏览器，黑色半透明高宽100%自适应覆盖也不需要任何JS计算的帮助，也不需要window的resize事件，直接CSS就可以搞定。很简单：

.overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

　　看上去是内滚动布局带来的一个小小的“赏”，但是，实际上，埋下了一个不小的“罚”。

　　随意改变滚动容器最大的问题在于，当存在覆盖层的时候，会影响背后页面内容的滚动。

　　100%尺寸的position:absolute/fixed的覆盖层，会覆盖任何非元素(包括)(包括这些元素的滚动条)，因此，只要覆盖+滚动容器改变，页面就无法滚动。

　　内滚动布局是典型的改变浏览器默认滚动容器的布局，自然覆盖层一出现，就没法滚动。不过这也没什么，对吧，弹框出现时候，页面背景没法滚也挺好的。

　　但是，麻烦的事情是，如果弹框自身高度很高，却又没法滚动呢(浏览器可用高度700像素，弹框有900像素高)？

　　传统布局下的弹框，如果高度很高，直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是，在内滚动布局下，弹框根本就不在滚动容器里面，翻滚一说从何谈起？

　　我们新版企业账户中心就遇到这个问题，我是这么解决的——overlay和dialog合体。

　　合体与滚动

　　合体是什么意思呢？基本上，90%+的弹框组件，半透明覆盖层overlay和弹框dialog是两个并列的兄弟关系的独立的元素，这种设计的好处在于overlay组件可以复用。实际上，我们要实现一个弹框效果，只要一层div标签就可以了，核心就是使用兼容的RGBA背景色技巧，然后弹框HTML放在里面：

.container {
- position: absolute; top: 0; left: 0; bottom: 0; width: 100%;
  - background-color: rgba(0,0,0,.5);
    - filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
      - overflow: auto;
        }
        :root .container {
        /* IE9 无 filter */
        filter: none;
        }

复制代码
　　HTML结构示意如下：

<div class=container>
- <dialog></dialog>
  - </div>

复制代码

　　此时，弹框在一个可滚动的容器之中，妈妈再也不用担心我不能愉快地翻滚了！

　　五、结束语

　　由于传统窗体滚动已经深入人心，所以我们可能会觉得内滚动布局似乎有些坑；但是，如果当年是内滚动布局天下，我们又该如何看待新兴的窗体滚动布局呢？然后，从产品的角度讲，内滚动布局在操作如此频繁的重交互项目中所带来的交互体验上的改进，要远比经验不足带来的额外开发成本要大很多很多。

　　我相信，这种交互形式以及web布局上的创新一定会带来很多正面的反馈和积极的影响，产品即将上线，我们可以拭目以待。

　　内滚动布局，更现代，更移动，如果您的项目合适，不妨也试试这种看似新颖的布局方式。

　　感谢阅读，欢迎交流！

via：腾讯ISUX

声明：游资网登载此文出于传递信息之目的，绝不意味着游资网赞同其观点或证实其描述。

标签：魔兽开发经验爬坑游戏开发者开发技术游戏开发论坛

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！