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

【问题标题】：JQuery UI autocomplete not scrolling with arrow keys in FirefoxJQuery UI 自动完成在 Firefox 中不使用箭头键滚动
【发布时间】：2011-08-12 20:19:25
【问题描述】：

我正在使用带有 JQuery 1.6.1 的 JQuery UI 自动完成 1.8。（在我的公司获得更新版本的软件非常困难，所以我一直坚持这些。）

我在自动完成窗格中放置了一长串字符串，因此我将 .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 的问题。

【问题讨论】：

您找到解决方案了吗？遇到同样的问题
不，我没有。我很惊讶我没有得到任何回应。
这里也一样。 +1关于这个问题。希望有人有答案
您运行的是什么版本的 jQuery UI？它似乎在最新版本中运行良好（在 Chrome 上测试）：jsfiddle.net/69uk3/3
见上面帖子的第一句话。 “我正在使用带有 JQuery 1.6.1 的 JQuery UI 自动完成 1.8。”。抛开这些废话，jquery 1.7.0 上的行为不会改变。

标签： jquery jquery-ui scroll jquery-ui-autocomplete firefox3.6

【解决方案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");
}}));

【讨论】：

【解决方案2】：

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

这不是答案，但它可能会提供有关该问题的更多信息。如果您在菜单打开时按向上或向下键时跟随调用，您将进入菜单小部件的 activate 方法，该方法调用 hasScroll 方法（使用 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 属性也没有定义。

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

【讨论】：

如果我能掌握 jQuery UI 1.8.18，我会试一试，如果可行，我会接受答案！

【解决方案3】：

我注意到this.element.attr("scrollHeight") 在

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

返回未定义。如果你将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() 检索属性。

【讨论】：