B2B商务网

微信扫一扫

微信小程序
天下好货一手掌握

扫一扫关注

扫一扫微信关注
天下好货一手掌握

网站设计分析:无滚动条的页面屏幕抖动现象

   2023-03-13 IP属地 广东佛山网络整理290
核心提示:网站设计分析:无滚动条的页面屏幕抖动现象:让前端设计帮忙出页面,上线测试发现页面切换之间出现屏幕抖动现象。这兼容性问题怎么老没解决呢?但细看发现,这不是兼容性问题。而是页面无滚动条造成的问题。问前端设计要解决方案,说没有办法解决。没办法,我只有自行搜索寻找方法。我相信这些东西不是问题,一定有方法解决。下面是我找到的方法,先别笑。滚动条是什么?看网页右侧,注意到没?用W
网站设计分析:无滚动条的页面屏幕抖动现象:

让前端设计帮忙出页面,上线测试发现页面切换之间出现屏幕抖动现象。这兼容性问题怎么老没解决呢?但细看发现,这不是兼容性问题。而是页面无滚动条造成的问题。问前端设计要解决方案,说没有办法解决。

没办法,我只有自行搜索寻找方法。我相信这些东西不是问题,一定有方法解决。下面是我找到的方法,先别笑。

滚动条是什么?看网页右侧,注意到没?用Win视窗操作系统的同学对滚动条不陌生吧。

滚动条一般在显示内容超过一屏时才出现滚动条。没超过一屏时一般默认不出现滚动条。

而发生屏幕抖动现象,正是因为人眼对相同部分的网页模块区域有明显的感知能力。比如导航部分,一般整站通用一个头部导航。两个页面间导航部分错位1个像素都能很明显感知出来。

情况一:页面都没有滚动条

朋友网好友管理页面有5个标签,但切换的过程中发现几乎每个标签页下面与导航的间距都不一样。奇葩啊。

这里只截图2个明显的页面,如下:

朋友网-寻找好友

朋友网-通讯录

这种情况下将同水平线的标签页统一与头部的间距即可。一个像素都不能少也不能多。

情况二:页面有部分没有滚动条

页面1没有滚动条,页面2有滚动条。2个页面内都没有错位现象。但只有在切换页面的时候才发现头部导航发生抖动,页面2被出现的滚动条向左移动15个像素。

看朋友网页面,如下:

朋友网-无滚动条

朋友网-有滚动条

看红线距离右侧的距离,明显向左偏移。

Google搜索只找到了关于网页滚动条的交互设计问题,但没谈到我说的这个现象。幸好在知乎联系到了百度MUX成员MoonMonster ,他给我的回答

这是现阶段浏览器设计问题,如果希望简单解决就在自己网站上自定义一个始终出现的滚动条吧。

SO,我没有找到出乎意料的答案。也只能这样笨办法解决了。

看Google首页右侧固定了滚动条:

Google首页

年后最后一天,写下这篇博客。呵呵。

祝愿各位同学新春快乐

除非注明:文章均为Gauin原创,欢迎转载!转载请注明本文地址,谢谢!

本文地址:

 
举报收藏 0打赏 0评论 0
免责声明
• 
本文源自网络整理发布的内容,本站会员编辑发布。
本网站对站内所有资讯的内容、观点保持中立,不对内容的准确性、可靠性或完整性提供任何明示或暗示的保证。
本网站部分内容来源于合作媒体、企业机构、网友提供和互联网的公开资料,版权归原作者所有,如有侵权等问题,请及时联系我们,我们将在收到通知后第一时间妥善处理该部分内容。info@1688b2b.com。

转载请注明原文出处: http://www.1688b2b.com/news/show-10870.html

 
更多>同类资讯文章
推荐图文
推荐资讯文章
点击排行
信息二维码

手机扫一扫

快速投稿

你可能不是行业专家,但你一定有独特的观点和视角,赶紧和业内人士分享吧!

我要投稿

投稿须知

【行业知识,产业动态、产品指南、产品应用等原创性内容优先审核发布。】
1、提交粗糙的广告软文或者对用户无任何帮助、无价值的文章将无法被通过审核。
2、发布内容时请选择合适的栏目归档。
3、严禁类同内容重复发布及标题堆砌关键字。
4、文章内容须与标题有一定相关性。
5、排版精美工整用户才愿意去看
6、以上不合规一律不予审核直接删除
7、审核时间一般24小时内,优质文章优先审核