Chevion 发布于 02月15, 2012

隐藏背景页面滚动条,操作弹层滚动

做过弹层组件的童鞋应该都考虑过取消页面滚动条,让其不能滚动,这样用户体验会好很多,当弹层内容超出屏幕展现范围的时候在弹层上面增加滚动条来查看全部内容。 之前写完组件都是匆匆了事,今天详细记录一下过程中的兼容处理。

一、去除滚动条方法

给body添加overflow:hidden属性即可,IE6、7下不会生效,需要给html增加overflow:hidden属性 样式中需要对IE6、7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度,具体颜色跟平台及用户设置背景色有关。

body或html去掉滚动条后,页面会有一个滚动条宽度/2的跳动!这个跳动对用户体验来十分不好,因此给body添加一下右padding,大小为滚动条的宽度。windows平台下滚动条的宽度为17px,linux平台下不同滚动器滚动条宽度不一致,可以用相关代码计算出滚动条的宽度,以下以windows平台为例。 相关代码:

document.documentElement.style.cssText = 'overflow:none;+overflow:hidden;_overflow:hidden;'; 
document.body.style.cssText = 'overflow:hidden;+overflow:none;_overflow:none;padding:0 17px 0 0;';

以上代码不考虑html或body是否有内联样式 ,如果html或body有内联样式则需要累加,否则会清空原有样式。还要缓存一下原有样式,清除以上代码(恢复滚动条)时需要用到。查看参考

二、去除隐患其它方法滚动页面

隐藏滚动条后,用鼠标滚轮滚动页面确实不会动了,以为这就ok了,不是... 键盘快捷键也可以操作浏览器的一些操作,与滚动页面相关的,比如:上下按键、翻页按键等。针对键盘快捷键,需要取消他们的默认操作。与取消方法相关

三、添加弹层样式

给body添加样式(兼容IE6)

height:100%;

给弹层添加滚动样式

overflow-y: auto; 
width: 100%;
height: 100%; 
left:0; 
_padding:0 17px 0 0;      
/**
针对IE6bug,子元素绝对定位后对于父元素的padding依然有效
**/

四、Demo

点击查看Demo页面

查看原文

阅读全文 »

Chevion 发布于 01月19, 2012

75team官博全新上线

普天同庆,共享盛世!为了迎接新春佳节的到来,75team官博全新皮肤同步上线!

新的一年开启新的希望,新的空白承载新的梦想。

拂去岁月之尘,让欢笑和泪水,爱与哀愁在心中凝成一颗厚重的晶莹的琥珀。

祝75team全体成员新年快乐!

阅读全文 »

Chevion 发布于 12月31, 2011

关于WaterFall瀑布流式布局的性能优化

最近一次项目改版需求,完成了一个瀑布流的扩展组件,基于QWrap库。新版已发布上线,入口:我喜欢

市面上已存在的瀑布流式布局的网站: 拼范网:http://www.pinfun.com/ 迷尚网:http://www.mishang.com/ 凡客达人:http://star.vancl.com/ 美丽说:http://www.meilishuo.com/ 蘑菇街:http://www.mogujie.com/welcome/ 淘宝哇哦:http://wow.taobao.com/ IDsoo:http://idsoo.com/ Topit:http://topit.me/ Mark之:http://markzhi.com/ 布兜:http://www.budou.me/ 堆糖:http://www.duitang.com/ 花瓣:http://huaban.com/ 码图网:http://www.markpic.com/popular/ 新鲜网:http://www.xinxian.com/ 易惊喜:http://www.ejingxi.com/

阅读全文 »