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

Question

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

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

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

有没有人知道一种方法或技巧来识别哪个 div 现在正在显示滚动条，或者哪个 div 溢出了屏幕？我在这方面已经有一段时间了，我在想，一定有一个 DevTools 技巧可以快速找到这个......

Answer 1

如果这发生在某个动作中，我会问自己此时加载了哪些 DOM 元素，我可能会尝试在此时加载的元素上添加类似 overflow: hidden; 的内容，以查看是哪一个执行此操作。

如果有 javascript，断点会很有用。

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

我发现断点非常实用，可以返回一个问题。

Answer 2

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

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

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

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

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

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

   • html
   • 身体
   • #react-entry-point

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)