javascript - Chrome 选择选项列表在滚动时分离

我有 jQuery 代码，它以所选控件位于屏幕中间的方式滚动页面。

$(document).ready(function() {
 $('.select').click(function() {
    $('html, body').animate({
        scrollTop: 100
    }, 100);
    return false;
 });
});

不幸的是，如果在选择扩展位置后滚动文档，Chrome(版本 31.0.1650.63)会导致选项列表分离。在 FF(25/26) 和 IE 10/11 中工作正常。 Fiddle demo

最佳答案

我能做的最好的是:http://jsbin.com/ANiMacem/3/edit

添加此功能:

function openSelect(obj) {

    var element = obj[0];
    if (document.createEvent) { // all browsers
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent("mousedown", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        element.dispatchEvent(e);
    } else
    if (element.fireEvent) { // ie
        element.fireEvent("onmousedown");
    }
}

并将您的代码更改为:

  $(".select").on('click',function() {

            $('html, body').animate({
            scrollTop: 100
        }, 100);

       setTimeout(function (){ openSelect($(".select"));
                               openSelect($(".select")); //yes twice.
                             },100);


         return false;
    });

关于javascript - Chrome 选择选项列表在滚动时分离，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20692105/