3

我正在开发一个表单系统，一个表单可以有许多具有任何输入类型的字段。这意味着我有文本输入/区域、单选、复选框、选择和选择多个。

我的问题是，如果鼠标进入多选（我假设单选也会这样做）滚动表单时，选择会控制鼠标事件，因此滚动停止。您必须将鼠标移出输入才能重新获得对滚动的访问权限，这可能会令人震惊。

一旦它有焦点滚动选项，我就没有问题将滚动重新绑定到输入，但我不希望它自动假设它。

4

1 回答 1

0

以下是我们解决此问题的方法。我们将一个函数附加到监视滚动事件的目标。目标获得一个快速掩码元素，当滚动时会显示掩码，从而防止事件气泡滚动目标。

由于外部元素正在滚动，因此目标元素不会长时间保持滚动事件。附加 500 毫秒的超时将使目标知道您想要滚动目标。

function scrollUninterruptable(elem) {
var scrollTimer = null,
scrollMask = $('<div>', { 'style': 'position: absolute; right: 0; left: 0; top: 0; bottom: 0;', 'class': 'scrollMask' }).hide();
elem = $(elem);
elem.append(scrollMask);
elem.parent().off('scroll.uninterruptably').on('scroll.uninterruptably', function() {
    elem.css('position', 'relative');
    scrollMask.show();
    if (scrollTimer) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        elem.css('position', '');
        scrollMask.hide();
    }, 500);
});
}

同样，这只是观察滚动事件附加 500 毫秒超时，然后隐藏允许滚动事件在目标上触发的掩码。

于 2013-08-28T22:04:00.180 回答