在knockout.JS中阻止滚动事件

时间:2015-08-10 10:13:26

标签: javascript jquery knockout.js

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

至少要做到这一点,我需要阻止浏览器的默认滚动操作。 我可以告诉knockout默认情况下,只要您不从事件处理程序返回'true'。

然而,它似乎不起作用,也没有明确地对事件调用'preventDefault'。此问题必须特定于滚动事件。

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

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

1 个答案:

答案 0 :(得分:7)

安德烈的帽子小贴士指出你应该使用mousewheel事件而不是滚动事件。

<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/