PC端设置和隐藏滚动条方法

展示屏幕:1920 x 1080 屏幕

问题:

在做PC端的时候,如果页面高度超过了1080就会有滚动条,不同游览器的滚动条都是计算宽度的。

而我们在开发的时候会将页面宽度限制到1920,所以当滚动条出现的时候,页面宽度+滚动条宽度就会大于1920

如果切换两个同级页面A,B,如果页面A出现了滚动条,B没有,那么切换A,B的时候,屏幕显示的宽度不同。

解决思路:

1. 想的是获取到路由器滚动条宽度,让页面宽度+滚动条宽度 = 1920所有的页面都需要,不管本该有没有滚动条(未实验)

2.隐藏滚动条:

::-webkit-scrollbar {

  width: 0 !important;

}

::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
}

MDN链接:::-webkit-scrollbar - CSS(层叠样式表) | MDN (mozilla.org)

改特性是非标准的,尽量不要在生产环境中使用它!

 

上一篇:ScrollBar(滚动条)的实现尝试


下一篇:Vue下实现element的select选择器下拉加载更多