在 div 上捕获滚动事件 [英] Capture scroll event on div

问题描述

我正在尝试在 Backbone.Marionette.CompositeView 中捕获滚动事件，但没有成功.

作为练习，我正在重写 http://www.atinux.fr/backbone-books/ 使用 Backbone.Marionette.如您所见，向下滚动时，会获取和显示更多书籍(即无限滚动).但是，我无法在我的视图中捕获滚动事件.

这是我的(简化)代码:

 LibraryView = Backbone.Marionette.CompositeView.extend({//属性、初始化器等事件:{'scroll': 'loadMoreBooks','click': 'loadMoreBooks'},//一些函数加载更多书籍:函数(){console.log("loadMoreBooks");}});

完整的源代码可以在这里看到:https://github.com/davidsulc/backbone.marionette-atinux-books/blob/scroll/assets/javascript/app.js#L86-89

我不明白的是点击"事件被正确触发，但滚动"事件不是.我做错了什么?

<小时>

所以最后错误很简单......我将el:#content"传递给视图的构造函数，但滚动是在.library"的CSS中定义的.所以一旦我改变了我的 DOM

<div class="library">

到

<div id="content" class="library"></div>

一切正常...

解决方案

这段代码对我有用:

var View = Backbone.View.extend({事件:{滚动":滚动"}，滚动:函数(){ console.log(滚动...")；}});

检查 jsFiddle

正如@JoshLeitzel 所说，我认为问题出在 DOM 元素本身.

尝试绕过 Backbone:

$("#content").bind("scroll", function(){ console.log("直接从jquery滚动"); } );

也尝试更换:

el: $('#content')

由

el: '#content'

我不认为这是问题，而是 el 定义的新风格:)

I'm trying to capture the scroll event within a Backbone.Marionette.CompositeView, but without success.

As an exercise, I'm rewriting http://www.atinux.fr/backbone-books/ using Backbone.Marionette. As you can see, when you scroll down, more books are fetched and displayed (i.e. infinite scroll). However, I'm unable to capture the scroll event on my view.

Here's my (simplified) code:

  LibraryView = Backbone.Marionette.CompositeView.extend({
    // properties, initializer, etc.

    events: {
      'scroll': 'loadMoreBooks',
      'click': 'loadMoreBooks'
    },

    // some functions

    loadMoreBooks: function(){
      console.log("loadMoreBooks");
    }
  });

The full source code can be seen here: https://github.com/davidsulc/backbone.marionette-atinux-books/blob/scroll/assets/javascript/app.js#L86-89

What I don't understand is that the "click" event is being triggered properly, but the "scroll" event isn't. What am I doing wrong?

---

Edit: so the error was pretty simple in the end... I was passing "el: #content" to the view's contructor, but the scroll was defined in CSS on ".library". So once I changed my DOM from

<div id="content">
  <div class="library">
  </div>
</div>

to

<div id="content" class="library"></div>

everything worked properly...

解决方案

This code works for me:

var View = Backbone.View.extend({
  events: { "scroll": "scroll" },
  scroll: function(){ console.log( "scrolling..." ); }
});

Check the jsFiddle

As @JoshLeitzel said I think the issue is in the DOM element it self.

Try to by-pass Backbone doing:

$("#content").bind( "scroll", function(){ console.log( "scrolling from jquery directly" ); } );

Also try to replace:

el: $('#content')

by

el: '#content'

I don't think this is the issue but is the new style of el definition :)

这篇关于在 div 上捕获滚动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！