Fatal编程技术网
  • html/
  • Html 材料界面：如何避免动态内容“；“跳跃”；因为滚动条？

Html 材料界面：如何避免动态内容“；“跳跃”；因为滚动条？

html css material-ui

Html 材料界面：如何避免动态内容“；“跳跃”；因为滚动条？,html,css,material-ui,Html,Css,Material Ui,我有一个浏览器应用程序，可以动态显示比可用屏幕大小更短或更长的内容。 在桌面浏览器上，这会导致垂直滚动条出现/消失，从而使内容左右“跳跃” 为了避免这种情况，我将style=“overflow-y:scroll”添加到body标记中，这将强制滚动条始终显示-如果内容短于屏幕，滚动条将被禁用 当我使用材质uiSwipeableDrawer组件显示滑动选项菜单时，问题就出现了。在浏览器检查器中查看DOM时，material ui似乎会在显示菜单时主动删除body标记上的overflow-y样式，但在

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

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

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

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

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

我不想跟踪
材质ui
正在做什么，也不想添加/删除填充-我很确定
材质ui
也会对其他组件（弹出窗口、工具提示等）执行此操作。跟踪所有这些组件并摆弄填充将很容易出错（更不用说繁琐）

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

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

<SwipeableDrawer disableScrollLock={true} ... >
一个可能的解决办法是

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

通过将主体的宽度设置为全视图：

  <body style="width: 100vw;">
这意味着body元素将一直延伸到滚动条的“下方”（与它在移动浏览器上的工作方式相同）

这样做的一个缺点是，屏幕右侧显示的内容可能会被滚动条阻挡。

您能不能不添加填充，而让容器宽度变小？问题是要知道多少。这个[链接]有一些想法，但问题是如何从一开始就设置好它。 
  <body style="width: 100vw;">