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

Question

我有 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

Answer 1

我能做的最好的就是: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;
    });