谷歌浏览器滚动溢出错误

Question

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

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

这是我创建的两个小提琴：

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

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

当它不专注于谷歌浏览器时，尝试在选择元素上选择第一个选项。然后看到它滚动所有可用的父元素滚动。

谷歌浏览器版本：34.0.1847.131

Answer 1

如果你想在谷歌浏览器中实现this，你所要做的就是：

• 在您的项目中加载 jQuery（可能您已经这样做了）
• 将此代码放入您的 CSS 中

CSS：

select:focus {
    outline: 0;
}

将此代码放入您的 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检测第一次点击，并在它之前触发中键点击，之后才点击鼠标左键。

Answer 2

我想我做到了！ :)

重点是防止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-typed select 一起使用。而且它是跨浏览器兼容的。