这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关。 阅读 40321 次, 今日 91 次
by zhangxinxu from http://www. 一、水平居中布局与滚动条跳动的千年难题当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后 例如,妇女之友大淘宝的首页: 然而,这种布局有一个存在一个影响用户体验的隐患。应该都知道,现代浏览器滚动条默认是
当前优化这种体验问题,一般有两种解决方法:
然而,然而,后面的策略只适合一些特殊的定制性很强的页面。你说像知乎这样子,高度随内容而定的页面,显然就无法驾驭;而第1种方法 大师,难道就没有一了百了、两全其美、三生有幸的方法了吗? 阿弥陀佛,骚年,请看我手中的这盏灯…… 二、CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动很简单,只要一行代码就搞定了: .wrap-outer { margin-left: calc(100vw - 100%); } 或者: .wrap-outer { padding-left: calc(100vw - 100%); } 然后就可以庆祝放鞭炮啦!! 首先, 您可以狠狠地点击这里(IE10+):页面出现滚动条的时候没有跳动demo demo页面中,标题和下面的妹子都是居中效果。其中,妹子做了本文所述的“滚动无跳动”处理,而标题没有,结果,你会发现,滚动条出现与否会让标题文字跳动,但是,妹子却女神般岿然不动: 兼容性 窄屏幕宽度下的处理 @media screen and (min-width: 1150px) { .wrap-outer { margin-left: calc(100vw - 100%); } } 三、结束语本文参考自:Fix ‘jumping scrollbar’ issue using only CSS 说点八卦吧,本文原作者名叫Ayke van La?them, 才开始写博客,就是因为写了这篇文章,搞掉了他1G的带宽流量,文章至少访问了15,000次,着实被吓着了,还是蛮搞的!哈哈! 如果你也有精彩创意且使用的前端tips, 不妨也拿出来共享下,会有很多意外的收获与成长的。 本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。 (本篇完)// 看完此文,是否觉得体内洪荒之力爆发,饥渴难耐想吐槽、情不自禁想捐赠? |
|