当我单击一个选择时，滚动条空间消失，所有内容向右移动

问题描述

我已经使用overflow-y: scroll;来始终保留滚动条空间，它解决了滚动条出现时内容移动的问题。但是，当我单击选择元素时，此滚动条空间消失了。即使单击选择，如何保持滚动条空间？

我正在使用material-ui组件和sass对其进行自定义。

解决方法

我为您的问题here找到了解决方案。您可以使用以下JavaScript使滚动条始终显示：

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 1px solid black;
    background-color: rgba(0,.5);
}

,

解决了在宽度上保留滚动条空间的问题。

代替使用width:100%，改为100vw并减小滚动条的大小（在这种情况下为16px）

body {
  width: calc(100vw - 16px);
}

::-webkit-scrollbar {
  width: 16px;
}