jQuery 组合框(带自动完成功能)在 IE 中滚动到顶部

Question

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

我已经设置了自动完成的样式，使其具有最大高度和滚动条：

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

这给了我一个工作示例，如这个jsFiddle所示。风格就是我添加的全部内容。在Chrome和Firefox中，一切都在继续工作。

在IE10中，它可以工作，但是第一次滚动（单击向下箭头）时，它似乎选择了第一项并再次向上滚动。之后，您可以继续正常工作。

可能导致此行为的原因是什么，是否可以修复？

编辑

我怀疑这是某种错误。当我使用 jQuery 1.7.1 和 jQuery UI 1.8.16 时，它可以工作（正如你在这个小提琴中看到的那样）。但是对于jQuery 1.10.3和jQuery UI 1.9.1，我遇到了上述问题。

编辑 2

显然，这不是组合框代码中的错误。据我所知，它是从jQuery UI 1.8引入到1.9的。我提交了一个错误。

Answer 1

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

_scrollIntoView：函数（项）{    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（）;        项目高度 = 项目高度（）;        如果（偏移量<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);
    };

希望这有帮助。

Answer 2

这

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