材料-UI：如何避免动态内容因为滚动条而“跳转”？

Question

我有一个浏览器应用程序，动态显示内容，可以短或长于可用的屏幕大小。在桌面浏览器上，这会导致垂直滚动条出现/消失，从而使内容左右“跳转”。

为了避免这种情况，我将style=“overflow-y：scroll”添加到body标记中，这将强制滚动条始终显示--如果内容比屏幕短，滚动条将被禁用。

当我使用Material-UISwipeableDrawer组件显示滑动选项菜单时，问题就出现了。在浏览器检查器中查看DOM，似乎Material-ui在显示菜单时主动删除body标记上的我的overflow-y样式，但在删除菜单时不会将其放回原处。

• 在Netlify上发布的示例应用程序
• 源代码
• 下面的屏幕截图显示，当禁用的滚动条可见时，内容是稳定的，然后显示菜单显示后，内容向左/向右跳跃。

这只发生在桌面上，Chrome和Firefox都可以复制。在移动设备（例如iOS）上不会发生这种情况，因为移动设备上的滚动条显示在内容的“顶部”。

我不想跟踪Material-UI在做什么和添加/删除填充--我很确定Material-UI对其他组件（弹出器、工具提示等）也有这种行为，跟踪所有这些组件和摆弄填充很容易出错（更不用说繁琐了）。

Answer 1

一个可能的解决方法是禁用滚动锁：

<SwipeableDrawer disableScrollLock={true} ... >

这样做的一个缺点是，在使用任何具有disablescrolllock功能的Material-UI组件时都必须记住这样做--这意味着在任何地方都要使用弹出窗口、弹出窗口等。

但是可以重写组件的默认道具。以下方法适用于swipabledrawer（因为drawer扩展了modal):

export const theme = createMuiTheme({
  props: {
    MuiModal: {
      disableScrollLock: true,
    },
  },
});