javascript - 查找元素的可滚动容器，包括在影子 DOM 中

Question

我正在寻找一个通用的解决方案来查找元素的可滚动容器(我想监听滚动事件)。 正常的方法是在 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 元素，并且它滚动正确的容器，这意味着浏览器以某种方式计算出它，但不会公开返回滚动容器的方法。

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

有什么想法吗？

Answer 1

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

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

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