网站设计分析:无滚动条的页面屏幕抖动现象
2013-04-14 17:52:40来源:[标签:来源] 阅读 ()
让前端设计帮忙出页面,上线测试发现页面切换之间出现屏幕抖动现象。这兼容性问题怎么老没解决呢?但细看发现,这不是兼容性问题。而是页面无滚动条造成的问题。问前端设计要解决方案,说没有办法解决。
没办法,我只有自行搜索寻找方法。我相信这些东西不是问题,一定有方法解决。下面是我找到的方法,先别笑。
滚动条是什么?看网页右侧,注意到没?用Win视窗操作系统的同学对滚动条不陌生吧。
滚动条一般在显示内容超过一屏时才出现滚动条。没超过一屏时一般默认不出现滚动条。
而发生屏幕抖动现象,正是因为人眼对相同部分的网页模块区域有明显的感知能力。比如导航部分,一般整站通用一个头部导航。两个页面间导航部分错位1个像素都能很明显感知出来。
情况一:页面都没有滚动条
朋友网好友管理页面有5个标签,但切换的过程中发现几乎每个标签页下面与导航的间距都不一样。奇葩啊。
这里只截图2个明显的页面,如下:
朋友网-寻找好友
朋友网-通讯录
这种情况下将同水平线的标签页统一与头部的间距即可。一个像素都不能少也不能多。
情况二:页面有部分没有滚动条
页面1没有滚动条,页面2有滚动条。2个页面内都没有错位现象。但只有在切换页面的时候才发现头部导航发生抖动,页面2被出现的滚动条向左移动15个像素。
看朋友网页面,如下:
朋友网-无滚动条
朋友网-有滚动条
看红线距离右侧的距离,明显向左偏移。
Google搜索只找到了关于网页滚动条的交互设计问题,但没谈到我说的这个现象。幸好在知乎联系到了百度MUX成员MoonMonster ,他给我的回答
这是现阶段浏览器设计问题,如果希望简单解决就在自己网站上自定义一个始终出现的滚动条吧。
SO,我没有找到出乎意料的答案。也只能这样笨办法解决了。
看Google首页右侧固定了滚动条:
Google首页
年后最后一天,写下这篇博客。呵呵。
祝愿各位同学新春快乐
除非注明:文章均为Gauin原创,欢迎转载!转载请注明本文地址,谢谢!
本文地址:http://www.gauin.com/gundongtiao-yemian.html




标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 秒针酷宝电商峰会上海场圆满落幕 品效合一助力企业跨入电商2 2015-05-21
- “杨部长座谈会&2015互联网+中国制造业高峰论坛”圆满闭 2015-06-10
- 秒针酷宝电商峰会上海场圆满落幕 品效合一助力企业跨入电商2 2015-05-21
- “杨部长座谈会&2015互联网+中国制造业高峰论坛”圆满闭 2015-06-10
- 秒针酷宝电商峰会上海场圆满落幕 品效合一助力企业跨入电商2 2015-05-21
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash
