javascript - HTML - 长表单上的多选窃取 dom 滚动

Question

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

我的问题是，当鼠标进入多选时滚动表单(我假设单选也会这样做)选择控制鼠标事件，因此滚动停止。您必须将鼠标移出输入才能重新获得对滚动的访问权限，这可能会很刺耳。

一旦它具有滚动选项的焦点，我就可以将滚动重新绑定(bind)到输入，但我不希望它自动假设它。

Answer 1

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

由于外部元素正在滚动，目标元素不会长时间保持滚动事件。附加 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 毫秒超时，然后隐藏允许滚动事件在目标上触发的掩码。