网站滚动条问题 由于滚动条出现消失造成页面抖动 && 自定义滚动条样式

解决由于滚动条出现消失造成页面抖动的问题

1、页面抖动#
原因：一个网站通常存在着多个页面，浏览器默认提供的overflow:auto;根据内容进行判断是否需要滚动条，
这造成每个页面是否有右侧的滚动条是不一致的，这会导致有滚动条的页面跳转到没有滚动条的页面会发生页面抖动

2、解决方法一：用overflow-y:scorll显性的设置右边提供滚动机制#
实现css代码：html {overflow-y: scroll;overflow-x: hidden;}；
缺点：不论屏幕是否需要滚动条，滚动条都会显示；

3、解决方法二：滚动条宽度：calc(100vw - 100%)#
100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。
calc()为计算方法
解决抖动可以根据是否有有滚动条进行不同的左右宽度计算： body{ padding-left: calc(100vw - 100%); }

自定义网站滚动条

//自动移滚动条样式
::-webkit-scrollbar{
width: 5px;
height: 5px;
}
// 定义滑块的圆角和颜色
::-webkit-scrollbar-thumb{
border-radius: 1em;
background-color: rgba(50,50,50,.3);
}
// 定义鼠标悬浮到滑块上的圆角和颜色
::-webkit-scrollbar-thumb:hover{
background-color: rgba(50,50,50,.5);
}
// 定义滚动条轨道的颜色
::-webkit-scrollbar-track{
border-radius: 1em;
background-color: rgba(50,50,50,.1);
}