谷歌鉻滾動溢出錯誤

Question

它是一個奇怪的錯誤，很難弄清楚。

我們創建了一個地圖應用程序，並在彈出窗口上有一個select元素。它已設置size屬性。 select元素的父項具有overflow:auto樣式。當出現滾動時，嘗試在選定元素上選擇某些內容向下滾動。但身體有overflow:hidden風格，它殺死了我們。

這裏是二小提琴，我創建：

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

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

儘量選擇選擇元素的第一個選項，當它沒有專注於谷歌瀏覽器。然後看到它滾動所有父元素avalibale滾動。

谷歌瀏覽器版本：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'); 
     }) 
    }); 

這可能不是完美的，因爲它是一個黑客。

至少它甚至與multiple-一起工作。它是跨瀏覽器兼容的。

Answer 2

如果你想實現在谷歌瀏覽所有你需要做的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來檢測第一次點擊並觸發中間的按鈕點擊它之前，只有在鼠標左鍵後。