javascript 材料-ui输入选择属性隐藏正文溢出-y滚动- react js

lnlaulya 于 2023-02-15 发布在 Java

关注(0)|答案(3)|浏览(114)

我正在使用material-ui v3.1.2和react js v16.5.2。在我的页面中，有很多地方我使用了<TextField>和select属性。所以，每当我点击那个TextField，当下拉菜单出现时，它隐藏了我的父垂直滚动条，导致一些ui向右移动，因为它隐藏了滚动条。我不希望发生这种情况。所以任何解决办法都会有很大帮助。
这是打开下拉菜单之前的屏幕截图，

这是打开下拉菜单后的屏幕截图，

JavaScript

来源：https://stackoverflow.com/questions/53846833/material-ui-input-select-attribute-hides-the-body-overflow-y-scroll-react-js

3条答案

按热度按时间

ylamdve61#

此问题的解决方法是使用material-ui的Select组件并使用“disableScrollLock：但在这种情况下，滚动条不会在打开select时消失，因此在选择选项打开时整个页面都是可滚动的。

<Select
    MenuProps={{
          disableScrollLock: true,
        }}
...
/>

赞(0）回复(0）举报 2023-02-15

zbsbpyhn2#

我有一个问题使用选择组件，所以使用textField的解决方案：

<TextField select SelectProps={{ MenuProps: { disableScrollLock: true } }}/>

赞(0）回复(0）举报 2023-02-15

ccrfmcuu3#

只在对别人有帮助时才回答。
默认情况下，每当你使用mat <Menu></Menu>打开下拉菜单时，它会将overflow: hidden;添加到body节点。一个可能的解决方案是，你将overflow-y: auto !important;添加到body元素上，这对我来说也是有效的。

例如：

在这里，您可以看到我在我的主体样式中添加了overflow-y: auto !important;

现在你可以看到mat自动将overflow: hidden;分配给我的body元素，我已经用!important;满足了它

赞(0）回复(0）举报 2023-02-15

我来回答

javascript 材料-ui输入选择属性隐藏正文溢出-y滚动- react js

3条答案

相关问题

热门标签

最新问答