Material-ui：如何避免动态内容因为滚动条而“跳跃”？答案

【问题标题】：Material-ui: how to avoid dynamic content "jumping" because of scrollbar?Material-ui：如何避免动态内容因为滚动条而“跳跃”？
【发布时间】：2021-03-17 18:02:23
【问题描述】：

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

为避免这种情况，我将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 也对其他组件（弹出器、工具提示等）执行此行为。跟踪所有这些组件并且摆弄填充将容易出错（更不用说乏味了）。

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

【问题讨论】：

你能不添加填充让你的容器更宽吗？问题是要知道多少。这个 [link] stackoverflow.com/questions/18548465/… 有一些想法，但问题是从一开始就设置它。

标签： html css material-ui

【解决方案1】：

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

<SwipeableDrawer disableScrollLock={true} ... >

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

但您可以覆盖组件的default props。以下适用于SwipableDrawer（因为Drawer 扩展了Modal）：

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

注意：mui（即material-ui version 5）似乎不再需要disableScrollLock 设置。

【讨论】：

【解决方案2】：

一种可能的解决方法是

使垂直滚动条显示在“顶部”

通过将 body 的宽度设置为完整视图：

  <body style="width: 100vw;">

这意味着 body 元素将一直延伸到滚动条“下方”（与在移动浏览器上的工作方式相同）。

这样做的缺点是出现在屏幕右侧的内容可能会被滚动条挡住。

【讨论】：