查找元素的可滚动容器，包括在 shadow DOM 中答案

【问题标题】：Find scrollable container of an element, including in shadow DOM查找元素的可滚动容器，包括在 shadow DOM 中
【发布时间】：2019-07-08 13:16:27
【问题描述】：

我正在寻找一种通用解决方案来查找元素的可滚动容器（我想听一下滚动事件）。通常的方法是在 DOM 树中向上遍历以检查父元素，直到其中一个元素是可滚动的 - here 是这样的一些解决方案。但是，如果 shadow DOM 也在图片中，这将失败。

这是一个示例结构：

<app-home>
  <ion-content>
    #shadow-root
      <div class="inner-scroll">
        <slot>
          -> <my-element> (reveal)
        </slot>
      </div>
    <my-element>...</my-element>
  </ion-content>
</app-home>

在上面的示例中，可滚动元素是.inner-scroll，它位于ion-content 的shadow dom 内。由于my-element 通过slot 进入容器，因此向上遍历树永远不会到达滚动容器（my-element -> ion-content -> app-home）。

我发现ion-content 有一个getScrollElement 方法，可以在这种特定情况下使用，但是我想知道是否有一个通用的基于 DOM 的解决方案，因为我希望它能够工作而不管上下文。

更新：

更清楚地说，我希望my-element 是一个独立的、可重用的组件，无论它放在哪里，都可以找到它的滚动容器。我发现，内置的 scrollIntoView 方法适用于 DOM 元素，它滚动正确的容器，这意味着浏览器以某种方式计算出来，但没有公开返回滚动容器的方法。

另一个想法是在更高级别上监听滚动事件，而不知道确切的元素，但这也不起作用，因为滚动事件不会传播。

有什么想法吗？

【问题讨论】：

这些答案可能会有所帮助 stackoverflow.com/a/69958607/965666 stackoverflow.com/a/69959491/965666

标签： javascript dom shadow-dom ionic4

【解决方案1】：

获取<ion-content>元素并使用其shadowRoot元素查询可滚动元素。

const ionContent = document.querySelector('app-home > ion-content')
const scrollable = ionContent.shadowRoot.querySelector('.inner-scroll')

然后您可以在可滚动元素中使用querySelector 来查找所需的元素。如果shadow DOM中有更多的可滚动元素，可以使用querySelectorAll返回一个节点数组。

【讨论】：

谢谢，这确实是一个纯粹的 DOM API 解决方案，但是它不是通用的，我仍然需要了解 DOM 结构。我希望my-element 成为一个独立的、可重用的组件，无论它放在哪里，都可以找到它的滚动容器。

【解决方案2】：

可能为时已晚，但如果它有助于其他人寻找答案，请回答。

一种可能的解决方案是使用getComputedStyle wrt parent element 并继续向上迭代，直到找到至少 2 个组合 - 高度+宽度比它自己的父级长 + 它具有溢出属性（通过 getComputedStyle）设置到任何允许滚动的东西。

【讨论】：