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

Question

我正在寻找一个通用的解决方案来找到元素的可滚动容器（我想听滚动事件）。通常的方法是在DOM树中遍历检查父元素，直到其中一个是可滚动的 - here是这样的一些解决方案。但是，如果阴影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的阴影dom内。由于my-element通过slot进入容器，遍历树将永远不会到达卷轴容器（my-element - > ion-content - > app-home）。

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

更新：

为了更清楚，我希望my-element是一个独立的，可重复使用的组件，它可以找到它的滚动容器，无论它放在何处。我发现，内置的scrollIntoView方法适用于DOM元素，它滚动正确的容器，这意味着浏览器以某种方式将其计算出来，但不会公开返回滚动容器的方法。

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

有任何想法吗？

Answer 1

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

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

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