当我单击选择时，滚动条空间消失，所有页面内容都向右移动答案

【问题标题】：When i click on a select the scrollbar space disappear and all the page content move right当我单击选择时，滚动条空间消失，所有页面内容都向右移动
【发布时间】：2020-08-13 12:17:21
【问题描述】：

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

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

【问题讨论】：

没有例子我帮不了你

标签： css reactjs sass material-ui react-hooks

【解决方案1】：

我找到了您的问题的解决方案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, 0, 0, .5);
}

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：