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

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 默认情况下监听自定义事件。

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

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

选中demo

Answer 2

正如Chinonso Chukwuogor在评论中所述，您应该将侦听器附加到所需的滚动元素。这样的事情应该起作用：

## # You should look at the following URL's in order to grasp a solid understanding # of Nginx configuration files in order to fully unleash the power of Nginx. # http://wiki.nginx.org/Pitfalls # http://wiki.nginx.org/QuickStart # http://wiki.nginx.org/Configuration # # Generally, you will want to move this file somewhere, and start with a clean # file but keep this around for reference. Or just disable in sites-enabled. # # Please see /usr/share/doc/nginx-doc/examples/ for more detailed examples. ## # Default server configuration # server { #listen 80 default_server; #listen [::]:80 default_server; # SSL configuration # #listen 443 ssl default_server; #listen [::]:443 ssl default_server; # # Note: You should disable gzip for SSL traffic. # See: https://bugs.debian.org/773332 # # Read up on ssl_ciphers to ensure a secure configuration. # See: https://bugs.debian.org/765782 # # Self signed certs generated by the ssl-cert package # Don't use them in a production server! # # include snippets/snakeoil.conf; root /var/www/html; # Add index.php to the list if you are using PHP index index.html index.htm index.nginx-debian.html; server_name _; location / { # First attempt to serve request as file, then # as directory, then fall back to displaying a 404. try_files $uri $uri/ =404; } # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # include snippets/fastcgi-php.conf; # # # With php7.0-cgi alone: # fastcgi_pass 127.0.0.1:9000; # # With php7.0-fpm: # fastcgi_pass unix:/run/php/php7.0-fpm.sock; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } # Virtual Host configuration for example.com # # You can move that to a different file under sites-available/ and symlink that # to sites-enabled/ to enable it. # #server { # listen 80; # listen [::]:80; # # server_name example.com; # # root /var/www/example.com; # index index.html; # # location / { # try_files $uri $uri/ =404; # } #}

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

如果没有，则更多的是infiniteScroll方法的问题。