【问题标题】:Block scroll event in knockout.JS在 knockout.JS 中阻止滚动事件
【发布时间】:2015-08-10 18:50:49
【问题描述】:

我需要在溢出区域上重新实现滚动功能,以便鼠标滚轮改变当前选择而不是滚动位置。

至少要做到这一点,我需要阻止浏览器的默认滚动操作。 据我所知,knockout 默认情况下会这样做,前提是您没有从事件处理程序返回“true”。

但是它似乎不起作用,也没有明确调用事件的“preventDefault”。这个问题一定是滚动事件特有的。

scrolled: function (vm, event) {
    event.preventDefault();
    return false;
}

示例:http://jsfiddle.net/vjLqauq5/2/

【问题讨论】:

  • 这是使用 jquery 插件并且只是将初始化包装在敲除绑定中。一个可能的解决方案,但我真正想要的是我无法阻止我所在的事件。
  • stackoverflow.com/a/4770179/10756 - 表示不能取消滚动事件。这一定意味着 ko 或 jquery 在这里都没有错。

标签: javascript jquery knockout.js


【解决方案1】:

向 Andrey 致敬,他指出您应该使用鼠标滚轮事件而不是滚动事件。

<div class="container" data-bind="foreach: items, event: { mousewheel: scrolled }">

从鼠标滚轮事件中,deltaY 将为您提供滚动方向,您可以使用它来更改选择的项目:

scrolled: function (vm, event) {
    var direction = Math.sign(event.deltaY), // 1 is down, -1 is up
        maxIdx = vm.items().length - 1,
        selectedIdx = vm.items.indexOf(vm.selected()) + direction;
    if (selectedIdx >= 0 && selectedIdx <= maxIdx) {
        vm.selected(vm.items()[selectedIdx]);
    }
    // return false; // implied as long as you don't return true
}

http://jsfiddle.net/vjLqauq5/8/

【讨论】:

  • 这行得通,所以 +1。我想我不得不不同意这种 UI 行为 - 如果我看到一个可滚动区域,我希望能够用我的滚轮滚动它......
  • 同意@JamesThorpe 但很好的回答队友#roy +1。欢呼
  • 根据这个链接,看起来鼠标滚轮已被弃用,支持“滚轮”:developer.mozilla.org/en-US/docs/Web/API/Element/…
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-01-25
  • 2016-01-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多