Найти прокручиваемый контейнер элемента, в том числе в теневом DOM - PullRequest
Новая
       26

Найти прокручиваемый контейнер элемента, в том числе в теневом DOM

0 голосов
/ 14 февраля 2019

Я ищу универсальное решение для поиска прокручиваемого контейнера элемента (я хотел бы прослушать событие прокрутки).Обычный подход заключается в обходе дерева DOM для проверки родительских элементов до тех пор, пока один из них не будет прокручиваем - здесь - некоторые решения, подобные этому.Однако это не удастся, если теневой 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 и прокручивает правильный контейнер, а это означает, что браузер каким-то образом это выясняет, но не предоставляет метод, который возвращает контейнер прокрутки.

Другая идея состояла в том, чтобы прослушать событие прокрутки на более высоком уровне, не зная точного элемента, но это также не работает, потому что событие прокрутки не распространяется.

Есть идеи?

1 Ответ

0 голосов
/ 14 февраля 2019

Получите элемент <ion-content> и используйте его элемент shadowRoot для запроса элемента с возможностью прокрутки. 

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

Затем вы можете использовать querySelector в элементе с возможностью прокрутки, чтобы найти нужный элемент.Если в теневом DOM больше прокручиваемых элементов, вы можете использовать querySelectorAll для возврата массива узлов.

...