滚动事件不在可滚动div内的div上触发

Question

我在另一个div中有一个div，其中外部div的高度小于内容。

第一个内容有滚动事件

function phoneListVM() {
  var _self = this;
  this.phones = ko.observableArray([
  	// Removed typeName
    new phoneVM(1, "123-234-3456"),
    new phoneVM(2, "654-343-3211")
  ]);
  
  // Observable to see which phone is currently selected
  this.SelectedPhone = ko.observable(_self.phones().length > 0 ? _self.phones()[0] : '');
  
  // Allow editing whichever phone they want
  this.EditPhone = function(obj) {
    _self.SelectedPhone(obj);
  };
  
  // Remove first phone and check if there are any more phones, if so add it to the selected phone
  this.RemoveFirstPhone = function() {
    var firstPhone = _self.phones()[0];
    if(firstPhone) {
        _self.phones.remove(firstPhone);
        _self.SelectedPhone(_self.phones().length > 0 ? _self.phones()[0] : '');
    }
  }
}

// Removed typeName and made it computed. Could be replaced with some lodash _.find if you are storing an array of types in the global space
function phoneVM(typeID, Number) {
  var self = this;
  this.PhoneTypeID = ko.observable(typeID);
  this.PhoneNumber1 = ko.observable(Number);
  this.PhoneTypeName = ko.computed(function() {
    switch (self.PhoneTypeID().toString()) {
      case '1':
        return 'Mobile';
        break;
      case '2':
        return 'Home';
        break;
    }
  });
}
$(document).ready(function() {
  var phoneList = new phoneListVM()
  ko.applyBindings(phoneList);
});

但此滚动事件无效。 请注意，我想在元素上触发滚动事件，而不是在窗口上触发。

我这里有一个傻瓜

https://issues.apache.org/jira/projects/ARROW

Answer 1

scroll事件处理程序应位于外部div，即具有滚动条的那个：

<div style="overflow:auto; height:200px" (scroll)="scrollHandler($event)">
  <div>Hello {{name}}</div>
  ...
</div>

您可以测试this modified plunker（检查控制台，我删除了警报调用）。