当选择更改时阻止多个选择滚动到顶部

Question

当我选择一个选项时，如何禁用滚动到所选项目的顶部？很简单，用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);
    }
}

Answer 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);
    }
}

Answer 2

这是一个可立即运行的示例，基于 @troelskn 的方法：

for (var i = 0; i <= 20; i++) {
    document.querySelector("select").innerHTML += "<option>" + i + "</option>"
}    
document.querySelector("#clickme").onclick = evt => {
    var pos = document.querySelector("select").scrollTop;
    console.log(pos);
    for (var i = 3; i <= 14; i++) {
        document.querySelector("select").options[i].selected = true;
    }
    document.querySelector("select").scrollTop = pos;
}

select { width: 20em; height: 8em; }

<div id="clickme">scroll to end and click here</div>
<select multiple></select>