Chrome Chrome Overflow Error

Question

His strange mistake, and it was hard to understand.

We are creating a map application, and there is an element in the pop-up window select. It has an attribute size. The parent of the select element has a style overflow:auto. When a scroll scrolls, trying to select something on an element, scrolls the body down. But the body has style overflow:hidden, and it kills us.

Here are two scripts created:

http://jsfiddle.net/e6BK3/1/

http://jsfiddle.net/e6BK3/8/

Try to choose the first option for the selected item if it is not focused on Google Chrome. Then you will see that it scrolls through all the avalibale parent elements to scroll.

Google Chrome Version: 34.0.1847.131

Answer 1

I think I did it! :)

The goal is to prevent any other propagation in the optiontag mousedownand manually control the focus of the field select.

See jsFiddle

I tried to make this as clear as possible:

$('option')
.on('mousedown', function(e){
    // Prevent any other propagations
    e.stopImmediatePropagation();

    // Focus on the select DOM element
    // but saving the scrollTop of each parent before
    $(this)
    .parents()
    .filter(function(){
        // filter only those which have a scroll visible
        return $(this)[0].scrollHeight > $(this)[0].clientHeight;
    })
    .each(function(_,elt){
        // and for each, save the scroll value in data set
        $(elt).data('saveScroll', $(elt).scrollTop());
    })

    // Then trigger the focus option of the select DOM element
    // And finally the custom 'scrollback' event
    $(this).parent('select')
    .trigger('focus')
    .trigger('scrollback');

});

$('select')
// This customized event is for getting back the value of the scroll of all parents
// only if this value exists
.on('scrollback'
    , function(e){
        $(this)
        .parents()
        .filter(function(){
            // filter only those which have this data in data-set
            return 0 === $(this).data('saveScroll') || ~~$(this).data('saveScroll');
        })
        .each(function(_,elt){
            // and for each, putting back the right scroll value
            $(elt).scrollTop($(elt).data('saveScroll'));
            $(elt).removeData('saveScroll');
        })
    });

This is probably not ideal because it is a hack.

At least he even worked with multiple-typed select. And it is cross-browser compatible.

Answer 2

If you want to achieve this in google chrome, all you have to do is:

• Load jQuery into the project (maybe you already did it)
• Put this code in your CSS

CSS

select:focus {
    outline: 0;
}

Put this code in your javascript:

$('.innder-div').on('scroll', function() {
    $(this).scrollTop(0);     
})

$('.root').on('scroll', function() {
    $(this).scrollTop(0);     
})

$('select').on('mouseover', function(){
    $(this).focus();
})

Jsfiddle here

: - ( ) , . , , javascript , .