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

Question

我已经使用overflow-y: scroll;来始终保留滚动条空间，并在滚动条出现时解决内容移动问题。但当我点击一个选择元素时，这个滚动条空间就会消失。即使我点击了一个选择，我该如何保持这个滚动条空间？

我正在使用材料ui组件和sass来定制它。

Answer 1

我在这里找到了解决您问题的方法。您可以使用以下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, 0, 0, .5);
}

Answer 2

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

不使用width:100%，改为100vw并减小滚动条的大小(在本例中为16px(

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