Question

这是一个奇怪的错误，很难弄明白。

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

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

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

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

如果没有专注于谷歌浏览器，请尝试在选择元素上选择第一个选项。然后看它滚动所有父元素avalibale滚动。

Google Chrome版本：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');
        })
    });

这可能并不完美，因为它是一个黑客。

至少它甚至适用于multiple - 键入的select。它符合跨浏览器标准。

Google Chrome滚动溢出错误

2 个答案: