如何解决当我单击一个选择时,滚动条空间消失,所有内容向右移动
我已经使用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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。