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

Question

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

[这是截图代码：请看示例部分] 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

正如 Chinonso Chukwuogor 在评论中所述，您应该将侦听器附加到您想要的滚动元素。类似的东西应该可以工作：

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

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

如果不是，更多的是infiniteScroll方法是什么的问题。

Answer 2

<el-main @scroll="infiniteScroll">......</el-main> 不起作用，因为在组件上绑定事件时，Vue 默认监听自定义事件.

If you want to listen for a native event you have to use the .native modifier:

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

勾选demo

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

How to handle scroll in specific element?

javascript

css

scroll

element

vue.js