html - Material-ui:如何避免由于滚动条而导致动态内容 "jumping"？

Question

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

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

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

• Example app发布于 Netlify
• Source code
• 下面的屏幕截图显示，当禁用的滚动条可见时，内容首先是稳定的，然后显示菜单显示后内容向左/向右跳跃。

这只发生在桌面上，Chrome 和 Firefox 都会重现。在移动设备(例如 iOS)上不会发生这种情况，因为移动设备上的滚动条显示在内容的“顶部”。

我不想跟踪 material-ui 正在做什么并添加/删除填充 - 我很确定 material-ui 对其他组件执行此行为以及(弹出窗口、工具提示等)跟踪所有这些组件并摆弄填充将很容易出错(更不用说乏味了)。

我能否以某种方式使垂直滚动条显示在内容的“顶部”，就像在移动浏览器中一样？我必须添加填充以确保没有任何内容被遮挡，但至少它是静态的 - 所以一旦问题得到解决，它就会保持不变。

Answer 1

一种可能的解决方法是禁用滚动锁:

<SwipeableDrawer disableScrollLock={true} ... >

这样做的一个缺点是，您必须记住在任何使用具有 disableScrolllock 功能的 material-ui 组件的地方执行此操作 - 这意味着在任何地方您使用弹出窗口、弹出窗口等。

但是您可以覆盖 default props对于组件。以下内容适用于 SwipableDrawer(因为 Drawer 扩展了 Modal):

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

---

注意:mui 似乎不再需要 disableScrollLock 设置(即 material-ui 版本 5) >) - 但您仍然需要在根 body 元素或类似位置设置 style="overflow-y:scroll" 。