jQuery 组合框（带自动完成功能）在 IE 中滚动到顶部答案

【问题标题】：jQuery combobox (with autocomplete) scrolls to top in IEjQuery 组合框（带自动完成功能）在 IE 中滚动到顶部
【发布时间】：2019-12-05 17:44:54
【问题描述】：

我对 jQuery 组合框有奇怪的行为。组合框不是常规的 jQuery 插件，但可以通过自动完成插件来实现。他们在jQuery ui site 上有一个例子。

我已将自动完成设置为具有最大高度和滚动条：

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。

【问题讨论】：

标签： jquery jquery-ui combobox jquery-ui-autocomplete

【解决方案1】：

我也有同样的问题。我在 jquery.ui.menu.js 中将问题过滤到_scrollIntoView（自动完成使用 ui.menu）。

_scrollIntoView: 功能（项目）{
    var borderTop, paddingTop, 偏移量, 滚动, 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;
        滚动 = this.activeMenu.scrollTop();
        elementHeight = this.activeMenu.height();
        itemHeight = item.height();
        如果（偏移量  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);
    };

希望这会有所帮助。

【讨论】：

【解决方案2】：

这已在 jQuery 1.12.2 中得到修复。如果您仍在使用 1.x 版本，我建议您升级，因为 1.x 和 2.x 不再接收更新。

【讨论】：