如何识别哪个 Div 正在显示滚动条

Question

我的仪表板应用程序是单页的 - 永远不会超过 100vh。

在某个地方，当我点击一个按钮时，一些未知的容器暂时溢出，右侧出现一个滚动条，然后一秒钟后就消失了。那一秒，页面背景跳动的很明显。

我希望通过 CSS 阻止此滚动条显示 - 但我很难识别溢出的容器。

有谁知道识别哪个 div 正在显示滚动条或哪个 div 溢出屏幕的方法或技巧？我已经研究了一段时间并且在想，必须有一个 DevTools 技巧才能快速找到它...

Answer 1

如果在操作过程中发生这种情况，我会问自己此刻加载的 DOM 元素是什么，我可能会尝试在此时加载的元素上添加类似 overflow: hidden; 的内容时刻看哪一个做。

如果有javascript，断点会有用。

也可以在 DOM 上放一些（元素检查器，右键单击 div 或其他元素，然后“打断”和“修改子树”）

我觉得断点很实用，可以回头做题

Answer 2

以下是我如何使用 Hadock 的答案来解决我的问题。使用 Break On Subtree Modifications（简称 BOSM），我能够做到以下几点：

1. 我在 div 上设置了 BOSM，我认为它就在添加内容的上方，然后重新 运行 应用程序。

2. 应用暂停并显示滚动条 - 正是我想要的。

3. 在 DevTools 控制台中，我输入了以下内容：

   [...document.querySelectorAll('*')].filter(x => x.scrollHeight > 1000)

   这返回了所有带有大滚动条（高度 > 1000 像素）的 Div。就我而言，它们是：

   • html
   • 正文
   • #react-入口点

4. 我能够添加 css:

   #react-entry-point{overflow: hidden;}

我的问题已经解决了。

这对每个人来说可能不是一个好的解决方案，但对我来说，我的 100vh（最大）单页应用程序，它成功了。

---

这里有一些其他有用的（相关的）控制台命令：

显示所有可能显示滚动条的容器（由用户 A1rPun 提供）：

[...document.querySelectorAll('*')].filter(x => x.clientHeight < x.scrollHeight)

显示所有滚动条大于 150px 的容器：

[...document.querySelectorAll('*')].filter(x => x.scrollHeight > 150)