滚动条造成页面抖动问题

最新推荐文章于 2024-09-14 10:18:08 发布

转载最新推荐文章于 2024-09-14 10:18:08 发布 · 4.7k 阅读

8 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_38323736/article/details/78664345

html相关问题专栏收录该内容

5 篇文章

订阅专栏

本文探讨了使用margin:0 auto使页面居中时遇到的问题，特别是当页面出现滚动条导致的抖动现象。提供了多种解决方案，包括使用overflow属性、calc函数计算滚动条宽度，以及针对不同屏幕尺寸的响应式处理。同时，详细介绍了如何定制滚动条样式，适用于Google浏览器，并给出了IE浏览器的兼容性设置。

在这里插入图片描述

总结： 若用到 margin:0 auto; 使页面居中，若部分页面出现滚动条，滚动条默认有 20px，这样会造成页面抖动；

解决办法：参考
1. html{overflow:scoll;} 让页面一直显示滚动条。
overflow 的几个属性值：
在这里插入图片描述
2. padding-left: calc(100vw - 100%); 自动计算滚动条的宽度，并让主体左边距离页面该（滚动条的）宽度。

比如：我想让画红框部分不受滚动条影响，那么此时我就给这一部分添加这条样式。还可以写成： margin-left: calc(100vw - 100%);
当浏览器宽度比较小的时候，左侧留的白明显与右边多，此时，做点响应式处理会更好一点：

@media screen and (min-width: 1150px) {
   .wrap-outer {
       margin-left: calc(100vw - 100%);
   }
}

需要注意的是，此时主体不需要再写 calc(100vw - 100%)。

3. 其他

html {
  overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}

滚动条的样式设置

在这里插入图片描述
主要针对于 Google 浏览器

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分
::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方
::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件

/* 滚动条的宽度 */
#app::-webkit-scrollbar{
  width:4px;
}
/* 滚动的滑块 */
#app::-webkit-scrollbar-thumb{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.2);
}
/* 外层轨道 */
#app::-webkit-scrollbar-track {
  -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 0;
  background: rgba(0,0,0,0.1);
}

兼容 ie

#app{
  scrollbar-face-color: #1f7ebe;        /*滚动条凸出部分的颜色*/
  scrollbar-highlight-color: #1f7ebe;    /*滚动条空白部分的颜色*/
  scrollbar-shadow-color: #1f7ebe;     /*立体滚动条阴影的颜色*/
  scrollbar-3dlight-color: #1f7ebe;     /*滚动条亮边的([www.111cn.net](http://www.111cn.net/))颜色*/
  scrollbar-arrow-color: #1f7ebe;     /*上下按钮上三角箭头的颜色*/
  scrollbar-track-color: #c1e2f1;     /*滚动条的背景颜色*/
  scrollbar-darkshadow-color: #1f7ebe;     /*滚动条强阴影的颜色*/
  scrollbar-base-color: #1f7ebe;     /*滚动条的基本颜色*/
}