html - 谷歌浏览器滚动溢出错误

Question

这是一个奇怪的错误，很难弄清楚。

我们创建了一个 map 应用程序，弹出窗口中有一个 select 元素。它设置了 size 属性。 select 元素的父元素具有 overflow:auto 样式。当出现滚动时，尝试在选择元素上选择某些内容会向下滚动主体。但是 body 有 overflow:hidden 风格，它会杀了我们。

这是我创建的两个 fiddle :

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

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

Try to select first option on select element when its not focused on google chrome.然后看到它滚动所有可用的父元素进行滚动。

谷歌浏览器版本:34.0.1847.131

Answer 1

我想我做到了! :)

重点是防止在 option 标签上的任何其他传播 mousedown 事件，并手动管理 select 框的焦点。

参见 jsFiddle

我尽量说清楚了:

$('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');
        })
    });

这可能并不完美，因为它是 hack。

至少它甚至可以与 multiple 类型的 select 一起使用。而且它是跨浏览器兼容的。