文享日志

滚动条引起的页面跳动问题

发表于2018年02月01日22:47:38

0条评论 168次阅读

  最近在用flex重构博客页面布局,在测试的时候发现点击链接,跳转到目标页时页面会抖动。观察元素宽度发现有3像素的宽度莫名其妙增加减少,最终发现是滚动条的问题。

      观察本博客可以看到博客布局是左右结构。导航栏悬浮在左侧,右边内容展示区。我采用百分比形式来适应窗口大小,当右边内容区的内容一个窗口能装下时,没有什么问题,但是,内容超出一个窗口,滚动条就出现了。


控制台输入下面这句,观察长度。保持窗口不变,看内容溢出一个窗口的宽度

document.documentElement.clientWidth

滚动条会压缩窗口的宽度。不同浏览器有不同的滚动条宽度。


解决方法:

1、既然滚动条会影响页面宽度,那我们专门留出滚动条宽度,使用剩下部分进行布局。

      100vw是包含滚动条的可视窗口宽度,100%width则不包含,所以可以计算一下滚动条宽度,为他预留空间

代码如下:

html{
      margin-right:calc(100vw-100%);
}


2、滚动条一直存在。不管当前页面需不需要滚动条

代码如下:

html{
      overflow:scroll;
}


参考来源:

1、张鑫旭的博客:小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

2、Fix 'jumping scrollbar' issue using only CSS       

👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广