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

Question

我已经使用overflow-y:scroll；来始终保留滚动条空间，它解决了滚动条出现时内容移动的问题。但是当我点击一个选择元素时，这个滚动条空间就会消失。我怎样才能保持这个滚动条空间，即使我点击一个选择？

我正在使用material-ui组件和sass来定制它。

Answer 1

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

不要使用width:100%，而是更改为100vw并减小滚动条的大小（在本例中为16px)

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

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

Answer 2

我找到了解决你问题的办法。您可以使用以下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);
}