选择更改时阻止多选滚动到顶部答案

【问题标题】：Block multiple select scrolling to top when selection changes选择更改时阻止多选滚动到顶部
【发布时间】：2017-09-13 09:29:10
【问题描述】：

当我选择一个选项时，如何禁用滚动到所选项目的顶部？这是简单的带js的多选，可以在没有clrt + C的情况下与多选一起使用，代码下来。

window.onmousedown = function (e) {

    var el = e.target;

    if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) {

        e.preventDefault();

        // toggle selection
        if (el.hasAttribute('selected')) 
            el.removeAttribute('selected');
        else 
            el.setAttribute('selected', '');

        // hack to correct buggy behavior
        var select = el.parentNode.cloneNode(true);
        el.parentNode.parentNode.replaceChild(select, el.parentNode);
    }
}

【问题讨论】：

标签： javascript select scroll block

【解决方案1】：

您可以保存之前的 scrollTop 位置并重新应用它，如下所示：

window.onmousedown = function (e) {
    var el = e.target;

    if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) {

        e.preventDefault();

        // save scroll state
        var yeOldeScroll = el.scrollTop;

        // toggle selection
        if (el.hasAttribute('selected')) {
            el.removeAttribute('selected');
        } else {
            el.setAttribute('selected', '');
        }

        // re-apply scroll state
        el.scrollTop = yeOldeScroll;

        // hack to correct buggy behavior
        var select = el.parentNode.cloneNode(true);
        el.parentNode.parentNode.replaceChild(select, el.parentNode);
    }
}

【讨论】：