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

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