检测滚动事件

Backbone.js detecting scroll event

本文关键字：事件 滚动 检测      更新时间：2023-09-26

我有以下视图

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"
},

没关系。

怎么了?

我不认为body元素将触发一个滚动事件，除非你明确地给它一个滚动条设置设置其overflow属性为scroll在CSS中。来自jQuery文档:

当用户滚动到元素中的不同位置时，将scroll事件发送给元素。它不仅适用于窗口对象，也适用于设置了overflow CSS属性为scroll的可滚动框架和元素(或者当元素的显式高度或宽度小于其内容的高度或宽度时为auto)。

假设您没有显式地为body元素提供具有overflow:scroll和/或固定高度的滚动条，则您想要侦听的scroll事件可能是由window对象触发的，而不是body。

我认为这里最好的方法是放弃骨干事件绑定(这实际上只是一个速记，只适用于view.el元素内的事件)，并直接绑定到initialize()中的窗口:

initialize: function() {
    _.bindAll(this, 'detect_scroll');
    // bind to window
    $(window).scroll(this.detect_scroll);
}

我认为问题在于Backbone使用事件委托来捕获事件，也就是说它将侦听器附加到this.$el，并且scroll事件根据定义不会冒泡。因此，如果scroll事件发生在this.$el的子(或后代)上，则该事件不能在this.$el上观察到。

它对click有效的原因，只是因为click冒泡。

body和window的滚动条是不同的，你必须确保你没有在window对象上滚动。下面的示例说明了您可能遇到的问题。

jsfiddle

我不确定你是否可以改变'el'的文件。窗口对象，但我不认为这将是一个很好的解决方案。我想说，你最好的选择是使用CSS，就像我做的那样，帮助你使用body元素，或者在body中创建一个div，并引用body标签。

好运。

我有同样的问题，这就是我如何实现它

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 ();

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 ");
    });
},
相关文章：