如何处理特定元素中的滚动？

Question

我在 Vue.js 中使用 Element UI 组件，想添加滚动管理功能来实现无限滚动。

[这是截图的代码：请看示例部分] http://element.eleme.io/#/en-US/component/container

我尝试了以下代码，但即使我滚动此部分，也未调用 infiniteScroll 方法。

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

此外，我也在下面尝试过，但它不起作用，因为此页面有两个滚动条（在导航/内容中）并且只想在滚动内容时调用 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>

检查演示