我正在寻找一种 CSS 解决方案来实现"overscroll-behavior: contain"目标元素没有溢出时的确切行为。
我有一个带有弹出式侧边栏/菜单的页面，在移动设备上占用 100vw 和 100vh（减去底部导航栏）并且不会溢出（没有足够的内容需要滚动条）。目前，当此侧边栏在移动设备上打开时，如果用户尝试滚动它，后台的主页会滚动，在此应用程序中，由于延迟加载/无限滚动，这可能会导致不需要的数据库调用。
这是一个最小的代码框演示：
在 demo.js 的第 55 行我已经在 JSS 中添加了该overscrollBehavior: "contain"属性，但是正如您所见，它不包含滚动链，除非您缩小浏览器的垂直高度以强制侧边栏的内容先溢出。（在 Chrome 上，overscrollBehavior似乎在代码框编辑器中具有预期的行为，但在其自己的窗口中弹出时却没有。）
肯定有一个 CSS 解决方案来获得这种行为，而无需先滚动元素吗？
有趣的是，至少在 Firefox 上，如果您缩小垂直高度以强制在侧栏上滚动，一旦您将浏览器调整为正常大小，该overscroll-behavior属性将继续包含滚动链，直到您刷新页面，这就是我的行为寻找，虽然显然在初始页面加载。
这是一个简单的代码笔，它显示了overscroll-behavior元素溢出和不溢出的区别，如果还不清楚的话。我还在2018 年的 CSS Tricks 论坛上发现了另一个帖子，有人询问这种行为，但没有解决方案。