Question

我正在使用JQuery UI自动完成1.8和JQuery 1.6.1。（在我的公司中获取更新版本的软件非常困难，因此我坚持使用这些软件。）

我在自动完成窗格中放置了很长的字符串列表，所以我设置了像这样的.ui-autocomplete类

.ui-autocomplete {height:200px; overflow-y:scroll; overflow-x: hidden;}

现在，当自动完成下拉列表弹出时，它会根据需要设置滚动条。但是，当我使用箭头键导航下拉列表时，面板不会随选择滚动。选择仍然发生。最后我跑掉了列表的底部，光标返回到顶部。除滚动窗格不滚动外，一切都按预期运行。

在我可以访问其他浏览器的工作之外的测试中，我发现chrome正确滚动并且IE 8正确滚动。这是firefox 3.6 linux浏览器的错误还是我错过了什么？

我被戴上手铐到Firefox 3.6 ua :( Mozilla / 5.0（X11; U; Linux i686（x86_64）; en-US; rv1.9.2.12）Gecko / 20101026 Firefox / 3.6.1.2）

这是这个版本的浏览器的错误还是我错过了什么？

编辑：我能找到一台带有ie6的机器和一台带有Firefox 3.5.3的机器。 ie6滚动和Firefox 3.5.3没有。看来这可能是firefox的一个问题。

Answer 1

我在任何浏览器上运行jQuery v1.7.2和jQuery UI v1.8.11的应用程序都有类似的问题。但是我发现它已修复jQuery UI v1.8.13 changelog。

所以根据变更集中的修复，我所做的只是覆盖下面的两个函数，它解决了问题。

$.widget("ui.menu", $.extend({ }, $.ui.menu.prototype, {
activate: function (event, item) {
    this.deactivate();
    if (this.hasScroll()) {
        var offset = item.offset().top - this.element.offset().top,
            scroll = this.element.scrollTop(),
            elementHeight = this.element.height();
        if (offset < 0) {
            this.element.scrollTop(scroll + offset);
        } else if (offset >= elementHeight) {
            this.element.scrollTop(scroll + offset - elementHeight + item.height());
        }
    }
    this.active = item.eq(0)
                      .children("a")
                      .addClass("ui-state-hover")
                      .attr("id", "ui-active-menuitem")
                      .end();
    this._trigger("focus", event, { item: item });
},

hasScroll: function () {
    return this.element.height() < this.element[$.fn.prop ? "prop" : "attr"]("scrollHeight");
}}));

Answer 2

解决方案：升级到jQuery UI 1.8.18为我解决了这个问题。

这不是答案，但它可能会提供有关该问题的更多信息。如果在菜单打开时按向上或向下键进行调用，则可以使用调用hasScroll方法的菜单小部件的activate方法（使用v1.8.11的5487行）;

hasScroll: function() {
    return this.element.height() < this.element.attr("scrollHeight");
},

似乎问题是没有为菜单ul元素定义scrollHeight属性，因此此方法总是返回false。

这是激活方法：

activate: function( event, item ) {
        this.deactivate();
        if (this.hasScroll()) {
            var offset = item.offset().top - this.element.offset().top,
                scroll = this.element.attr("scrollTop"),
                elementHeight = this.element.height();
            if (offset < 0) {
                this.element.attr("scrollTop", scroll + offset);
            } else if (offset >= elementHeight) {
                this.element.attr("scrollTop", scroll + offset - elementHeight + item.height());
            }
        }
        this.active = item.eq(0)
            .children("a")
                .addClass("ui-state-hover")
                .attr("id", "ui-active-menuitem")
            .end();
        this._trigger("focus", event, { item: item });
    }

即使强制hasScroll方法返回true，也会遇到另一个问题，因为还没有定义scrollTop属性。

如果我找到解决方案，我会告诉你，因为它也困扰着我的应用程序。

Answer 3

我注意到

中的this.element.attr("scrollHeight")

hasScroll: function () {
        return this.element.height() < this.element.attr("scrollHeight");
    },

返回 undefined 。如果您将this.element.attr("scrollHeight")更改为this.element.prop("scrollHeight")，则会获得scrollHeight。

但是activate: function (event, item) {出现同样的问题，所以你还需要更改所有出现的

this.element.attr("scrollTop")至this.element.prop("scrollTop")

在该功能中也可以使其发挥作用。

您可以阅读.prop() in the jQuery API，但基本上原因是

在jQuery 1.6之前，.attr（）方法在检索某些属性时有时会考虑属性值，这可能会导致行为不一致。从jQuery 1.6开始，.prop（）方法提供了一种显式检索属性值的方法，而.attr（）则检索属性。

JQuery UI自动完成不在Firefox中使用箭头键滚动

3 个答案: