Question

我正在寻找一种通用解决方案来查找元素的可滚动容器（我想听一下scroll事件）。通常的方法是在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的阴影区域内。由于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来查找所需的元素。如果影子DOM中有更多可滚动元素，则可以使用querySelectorAll返回节点数组。

Answer 2

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

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

查找元素的可滚动容器，包括阴影DOM

2 个答案: