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

Question

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

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

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

overflow-y: scroll

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

Answer 1

参考GPT和自己的思路：

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

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

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

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

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

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