当目标元素未溢出时，CSS 'overscroll-behavior： contain'

CSS `overscroll-behavior: contain` when target element doesn't overflow

提问人：benmneb 提问时间：10/24/2020 最后编辑：benmneb 更新时间：10/28/2020 访问量：1502

问：

我正在寻找一种CSS解决方案来实现目标元素没有溢出时的确切行为。"overscroll-behavior: contain"

我有一个带有弹出式侧边栏/菜单的页面，在移动设备上，它占用 100vw 和 100vh（减去底部导航栏）并且不会溢出（没有足够的内容需要滚动条）。目前，当此侧边栏在移动设备上打开时，如果用户尝试滚动它，后台的主页会滚动，在此应用程序中，由于延迟加载/无限滚动，可能会导致不需要的数据库调用。

下面是一个最小的 codesandbox 演示：

编辑连续的 Material-UI 小吃栏

在 demo.js 的第 55 行，我已将属性添加到 JSS 中，但如您所见，它不包含滚动链，除非您缩小浏览器的垂直高度以强制侧边栏的内容首先溢出。（在 Chrome 上，似乎在 codesandbox 编辑器中具有预期的行为，但在自己的窗口中弹出时则没有。overscrollBehavior: "contain"overscrollBehavior

当然，有一种CSS解决方案可以在元素不必首先可滚动的情况下获得这种行为？

有趣的是，至少在Firefox上，如果您缩小垂直高度以强制滚动侧边栏，一旦您将浏览器大小调整回正常状态，该属性将继续包含滚动链，直到您刷新页面，这是我正在寻找的行为，尽管显然在初始页面加载时。overscroll-behavior

这是一个简单的代码笔，显示了溢出和不溢出的元素的差异，如果还不清楚的话。我还在 2018 年的 CSS Tricks 论坛上发现了另一篇帖子，有人询问这种行为，但没有解决方案。overscroll-behavior

CSS Overflow 翻滚

评论

0赞 A Haworth 10/25/2020
只是为了确保我理解 - 从例如 [link] 中的描述来看 developer.mozilla.org/en-US/docs/web/css/overscroll-behavior 它似乎是过度滚动行为：包含应该做你想做的事，但你发现它不是在没有溢出的情况下。它正在链接卷轴？
2赞 benmneb 10/25/2020
是的，我认为这是正确的。如果目标容器中没有溢出，则表现得好像它不存在一样overscroll-behavior: contain
0赞 Kim Skogsmo 7/6/2021
也在寻找同样的东西，但是为了网络。而那^也正是我的情况。我有一个菜单 div 的 3 个不同区域，每个区域的宽度是父容器宽度的 33.33%。类别的子类别将从左到右打开，因此高度可能不同。它们应限制在容器的大小内，并在需要时滚动。现在，overflow-behaviour 工作正常，并且不会冒泡滚动到 html 元素，无论其中哪个元素当时是可滚动的，但当没有足够的类别时被忽略。
0赞 benmneb 7/7/2021
“Not for Web”是指非 React 网站吗？因为这个问题的答案将适用于任何使用 CSS 的网站，无论是否反应

答： 暂无答案

上一个：获取 Chrome 的“重新计算样式”分析事件受影响的 DOM 元素

下一个：Angular-google-area-chart 图表背景颜色重叠