我正在尝试使用Material UI(当前版本为3.1.2)构建接口。
不久前,当我使用bootstrap4时,我补充说
style="overflow-y: scroll; height: 100%"
对我
head
标记始终显示滚动条,以防止应用程序在页面内容比屏幕长时跳来跳去。
现在我正在尝试使用Material UI,当与Material UI的弹出组件(popper、menu等)结合使用时,溢出设置似乎会导致问题。
我在常见问题解答中看到,这是一个已知的解决方法问题:
https://material-ui.com/getting-started/faq/#why-do-the-fixed-positioned-elements-move-when-a-modal-is-opened-
但我不知道这是在告诉我该怎么做。
下面的短语“应用全局类”暗示了什么?
“应用全局.mui固定类名…处理这些元素。”
他们打算去哪
mui-fixed
会被添加到我的应用程序中的每个组件吗?到菜单/弹出按钮的锚?或者他们是说我应该“全局”地应用它(即,在某些地方的反应页面组件层次结构中处于较高位置?)
同时,作为一个解决方法,我刚从我的
html
元素。
当内容在页面大小上增长/缩小时,应用程序内容仍然会跳跃,但看起来比我使用引导程序时要不那么难看。
我试图添加
穆定
类到我的身体,因此当应用程序启动时,它看起来像:
<body style="overflow-y: scroll; height: 100%" class="mui-fixed">
因此,当页面较短时,会有一个禁用的滚动条。如果页面增长,滚动条将启用。
然后,在显示菜单弹出窗口时,材质用户界面将其更改为:
<body style="overflow: hidden; height: 100%; padding-right: 17px;" class="mui-fixed">
不管内容的长度如何,它看起来都很好。但当菜单被取消时,Material UI将body元素更改为:
<body style="height: 100%; padding-right: 0px;" class="mui-fixed">
溢出样式消失了,如果页面内容比窗口短,则会导致滚动条被完全删除,因此页面内容会“跳过”以填充缺少滚动条的空间。
