HTML - 多选在长表单上窃取DOM滚动

Question

我正在开发一个表单系统，一个表单可以有多个字段，每个字段都可以有任意的输入类型。也就是说，我有文本输入/区域、单选框、复选框、下拉选择和多选下拉选择。

我的问题是，在滚动表单时，如果鼠标进入多选下拉列表（我认为单选下拉列表也会这样），该下拉列表将控制鼠标事件，导致滚动停止。您必须将鼠标移出输入框才能重新访问滚动条，这可能会很烦人。

我没有问题重新绑定滚动条到输入框，一旦它获得焦点来滚动选项，但我不希望它自动假定这一点。

- JeffBaumgardt

---

如果多选框无法滚动或失去焦点，用户如何从可用选项中进行选择？ - user2404546

不幸的是，这是多选框本身的一部分（取决于客户端，你会得到一个真正的 Windows 列表）。如果这种体验确实对大量用户造成问题，你最好的选择是完全更改表单上是否有多选框或是否启用它（请记住，这会改变它在 DOM 中的响应方式以及与屏幕阅读器的交互）。 - Shawn E

我已经解决了这个问题，但忘记重新发布。可以通过将一个快速函数附加到元素上，并在其中处理滚动事件并附加超时来解决这个问题。 - JeffBaumgardt

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毫秒的超时，然后隐藏遮罩层，这将允许滚动事件在目标上触发。

- JeffBaumgardt