Как обработать прокрутку в конкретном элементе?

Question

Я использую элемент пользовательского интерфейса Element в Vue.js и хотел бы добавить функцию управления прокруткой для реализации бесконечной прокрутки.

[Это код скриншота: пожалуйста, посмотрите пример раздела] http://element.eleme.io/#/en-US/component/container

Я попробовал следующий код, но метод infiniteScroll не был вызван, даже если я прокручиваю этот раздел.

<el-main @scroll="infiniteScroll">......</el-main>

Кроме того, я попробовал также и ниже, но это не сработало, потому что эта страница имеет два прокрутки (в nav / content) и хочет вызвать метод infiniteScroll только при прокрутке контента.

created: function () {
  window.addEventListener('scroll', this.infiniteScroll);
},
destroyed: function () {
  window.removeEventListener('scroll', this.infiniteScroll);
}

У вас, ребята, есть лучшее решение?

Answer 1

<el-main @scroll="infiniteScroll">......</el-main> не работает, потому что при привязке события к компоненту Vue по умолчанию прослушивает пользовательские события .

Если вы хотите прослушать нативное событие, вы должны использовать модификатор .native :

<el-main @scroll.native="infiniteScroll">......</el-main>

Проверка демо

Answer 2

Как сказал Чинонсо Чуквуогор в комментариях, вы должны прикрепить слушателя к элементу прокрутки, который вы хотите. Нечто подобное должно работать:

<el-main id="myInfiniteScroll">......</el-main>

document.getElementById('myInfiniteScroll').addEventListener('scroll', this.infiniteScroll);

Если этого не произойдет, вопрос скорее в том, что такое метод infiniteScroll.