Chrome selection options separate from scrolling

Question

I have jQuery code that scrolls the page so that the selected control is in the middle of the screen.

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

Unfortunately, Chrome (version 31.0.1650.63) disables the list of options when scrolling through a document after selecting an extension. Works fine in FF (25/26) and IE 10/11. Demo screenshot

Answer 1

The best I could do is the following: http://jsbin.com/ANiMacem/3/edit

Add this function:

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

And change your code to:

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

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

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


         return false;
    });