Javascript Backbone.js检测滚动事件

我有以下看法

var FullWindow = Backbone.View.extend({
  initialize: function() {
    _.bindAll(this, 'detect_scroll');
  },

  // bind the events
  events : {
    "scroll" : "detect_scroll"
  },

  detect_scroll: function() {
    console.log('detected');
  }
});

我通过

var full_window = new FullWindow({el:$('body')});

但我认为它不起作用

当我将事件更改为

events : {
  "click" : "detect_scroll"
},

很好

---

怎么了？

主体和窗口的滚动条不同，您必须确保没有在窗口对象上滚动。下面是一个JSFIDLE，它说明了您可能遇到的问题

我不确定是否可以将“el”更改为document.window对象，但我认为这无论如何都不是一个好的解决方案。我想说，您最好的选择是像我一样使用CSS来帮助您处理body元素，或者在body内创建一个div并引用body标记

---

祝你好运。

我不认为

body

元素会触发滚动事件，除非你通过在CSS中将

overflow

属性设置为

scroll

来显式地给它一个滚动条。从jQuery文档中：

当用户滚动到元素中的其他位置时，将向元素发送滚动事件。它适用于窗口对象，但也适用于可滚动的框架和元素，溢出CSS属性设置为滚动（或当元素的显式高度或宽度小于其内容的高度或宽度时自动）

假设您没有显式地给

body

元素一个带有

溢出：scroll

和/或固定高度的滚动条，那么您想要侦听的

滚动

事件可能是由

窗口

对象触发的，而不是

body

我认为这里最好的方法是删除主干事件绑定（它实际上只是一个简写，只对

view.el

元素中的事件有效），并直接绑定到

initialize（）

中的窗口：

---

我认为问题在于主干网使用事件委派来捕获事件，即它将侦听器附加到

this.$el

，并且

滚动

事件根据定义不会冒泡。 因此，如果

this.$el

的子代（或后代）发生

滚动

事件，则在

this.$el

上无法观察到该事件

---

它之所以适用于

单击

，是因为

单击

会冒泡。

我也遇到过同样的问题，这就是我实现它的方式

var MyView = Backbone.View.extend({
el: $('body'),
initialize: function() {
    $(window).scroll(function() {
        if ($(window).scrollTop()!=0 && $(window).scrollTop() == $(document).height() - $(window).height()) {
            if (mpListModel.get('next')) {
                var res = confirm('Next page?');
                if (res==true) {
                    myView.fetch()
                }
            }
        }
    });
},
events: {},
fetch: function() {
    //fetch stuff
}

}))； var myView=myView（）

afterRender:function（）{
//这是我的卷轴
var$scrollable=this.$el.find（'.page content'）；
$scrollable.scroll（函数（）{
警报（“事件滚动”）；
});
},

正文确实接收到滚动事件。请在我的回答中引用JSFIDLE。起初我也在想同样的事情，但在使用CSS操作之后，我终于得到了body元素的滚动条。通过绕过上面的主干事件哈希，在滚动时将丢失对“this”的引用。它将不再是FullWindow对象。它将是窗口对象。@KyleRogers-对

此

的引用将由

函数绑定。bindAll

函数-这是该行的要点。请参阅主干的默认事件绑定在调用initialize（）之前发生。因此，当我需要手动绑定事件时，我会在initialize（）中进行绑定。但是没有一个正确的方法可以做到这一点-这取决于你。@AntonEgorov-

$（窗口）。关闭（this.detect\u scroll）

应该可以做到。这种方法的问题是滚动事件永远不会被清除/取消注册，这意味着在每次软重新加载时，或者在通过主干路由器重新访问页面时，滚动事件都会被重新注册。请不要只发布代码作为答案，还要解释代码的作用以及它如何解决问题。带有解释的答案通常更有帮助，质量更好，更容易吸引选票。

var MyView = Backbone.View.extend({
el: $('body'),
initialize: function() {
    $(window).scroll(function() {
        if ($(window).scrollTop()!=0 && $(window).scrollTop() == $(document).height() - $(window).height()) {
            if (mpListModel.get('next')) {
                var res = confirm('Next page?');
                if (res==true) {
                    myView.fetch()
                }
            }
        }
    });
},
events: {},
fetch: function() {
    //fetch stuff
}

afterRender: function() {
    // <div id="page-content" class="page-content"> la class qui contiens le scroll
    var $scrollable = this.$el.find('.page-content'); 
    $scrollable.scroll(function() {
           alert("event scroll ");
    });
},