jQuery組合框（具有自動完成功能）在IE中滾動到頂部

我對jQuery組合框有奇怪的行爲。組合框不是常規的jQuery插件，但可以使用自動完成插件來實現。他們在jQuery ui site上有一個例子。jQuery組合框（具有自動完成功能）在IE中滾動到頂部

我的風格自動完成有一個最大高度和滾動條：

ul.ui-autocomplete { 
    max-height: 200px; 
    overflow: auto; 
}

這給了我所看到的this jsFiddle工作的例子。風格是我添加的。在Chrome和Firefox中，一切都在繼續。

在IE10中，它可以工作，但是第一次滾動（點擊向下箭頭），它似乎選擇了第一個項目並再次滾動。之後，您可以繼續正常工作。

什麼可能導致此行爲，它是否可修復？

編輯

我懷疑這是某種類型的錯誤。當我使用jQuery 1.7.1和jQuery UI 1.8.16時，它可以工作（如您在this fiddle中看到的那樣）。但有了jQuery 1.10.3和jQuery UI 1.9.1，我遇到了上述問題。

編輯2

顯然，這是不是在組合框代碼中的錯誤。就我所知，它是從jQuery UI 1.8引入到1.9的。我有filed a bug。

來源

2013-10-29 Peter

我有同樣的問題。我在jquery.ui.menu.js中過濾了問題_scrollIntoView（自動完成使用ui.menu）。

_scrollIntoView: function (item) { 
    var borderTop, paddingTop, offset, scroll, elementHeight, itemHeight; 
    if (this._hasScroll()) { 
     borderTop = parseFloat($.css(this.activeMenu[0], "borderTopWidth")) || 0; 
     paddingTop = parseFloat($.css(this.activeMenu[0], "paddingTop")) || 0; 
     offset = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop; 
     scroll = this.activeMenu.scrollTop(); 
     elementHeight = this.activeMenu.height(); 
     itemHeight = item.height(); 
     if (offset < 0) { 
      this.activeMenu.scrollTop(scroll + offset); 
     } else if (offset + itemHeight > elementHeight) { 
      this.activeMenu.scrollTop(scroll + offset - elementHeight + itemHeight); 
     } 
    } 
},

offset在IE中爲負值，所以scroll + offset總是近似爲0.這樣強制滾動到頂部。在非IE偏移量是正值，所以這裏沒有什麼奇怪的事情發生。

我固定它通過覆蓋_scrollIntoView（見http://jsfiddle.net/KdDfp/9/）

var menu = $(this.input.autocomplete("widget")).data("ui-menu"); 
    var originalScrollIntoView = menu._scrollIntoView; 
    menu._scrollIntoView = function (item) { 
     if (this._hasScroll()) {`enter code here` 
      borderTop = parseFloat($.css(this.activeMenu[0], "borderTopWidth")) || 0; 
      paddingTop = parseFloat($.css(this.activeMenu[0], "paddingTop")) || 0; 
      var offset = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop; 
      if (offset < 0) { 
       // Glitchy 'offset', do nothing. 
       return; 
      } 
     } 
     originalScrollIntoView.apply(this, arguments); 
    };

希望這有助於。

來源

2014-04-08 08:07:47 iamthes

jQuery組合框（具有自動完成功能）在IE中滾動到頂部

回答

相關問題