页面出现滚动条后带了页面抖动问题,页面布局会向左移动。该如何解决

如下图,我的页面在网站打开时是可以全部显示在屏幕里的。

img

但是当我展开折叠面板后,页面右边会出现滚动条。

img

在滚动条出现的一刹那,我的页面会发生抖动,页面布局会向左移动。
我查了一下有人说用overflow-y: scroll让滚动条一直显示,我加了之后发现没作用。网页自己还会出现滚动条。

overflow-y: scroll

请问各位老哥如何解决滚动条出现带来的抖动问题呢,如何让滚动条在网站打开就存在呢

参考GPT和自己的思路:

首先建议先检查一下页面布局的样式代码是否有问题,如布局容器的宽度是否超出了屏幕宽度,或者是使用了负的margin或padding等,这些都有可能导致页面出现抖动问题。

如果排除了布局代码的问题,可以尝试使用以下方法解决滚动条抖动问题:

  1. 在页面加载时就设置body元素的overflow属性为hidden,这样网页就不会出现滚动条了,也避免了滚动条出现时的抖动问题。可以在页面加载完成后再将overflow属性设为auto或scroll,以便有内容需要滚动时可以正常使用滚动条。

  2. 采用固定头部或固定底部的方式,在页面中添加一个固定位置的元素,比如fixed定位的div,来固定页面的头部或底部,这样即使出现了滚动条也不会对页面布局造成干扰。

  3. 使用CSS样式overflow-y: hidden,将滚动条设置为隐藏状态,这样页面中即使出现了滚动条也不会被显示出来,也避免了滚动条带来的抖动问题。同时,也可以通过修改元素的高度或宽度,使页面正常显示,且不会出现滚动条。

希望以上方法能够帮助你解决滚动条抖动的问题。


body{
            overflow-y: scroll;
        }

可以强制设一个默认的最小高度