jquery-ui - JQuery UI 自动完成可滚动内容在鼠标移动时向上滚动

Question

我最近实现了 JQuery UI 自动完成组合框，一切正常，而不是我发现的一个错误并且无法找到解决方案。我不能在这里发布我的代码，因为它是公司代码，但我看到问题在 jquery ui 演示页面上可见：

https://jqueryui.com/autocomplete/#maxheight

现在，如果您在输入字段中键入“a”，您将获得一个带有自动完成结果的面板，这是一个内部<ul>带有<li>元素的元素，并且因为它具有设定的高度，所以会有一个完美的垂直滚动。现在将鼠标放在显示结果的面板内，使用鼠标滚轮向下滚动列表，然后将鼠标指针向上移回输入字段。您将看到列表开始向上滚动。当您多次上下移动鼠标指针时，列表将继续上升，这对我的实现来说是一个真正的问题。

我创建了一个<ul>带有 set height 和 overflow-y 属性的常规列表来模拟可滚动的 ui 面板，但我没有这个问题。

这是一个有问题的 .gif 文件，每个人都可以在他们的页面上进行测试。Chrome 浏览器会发生这种情况

更新

！！！解决了！！！

在玩了很多之后，我发现问题出在 jquery 试图使顶部元素成为焦点。由于某种原因，它决定必须聚焦的元素实际上是列表中的前一个元素，甚至不在视口中。因此，关注这个元素会导致菜单“跳转”到前一个元素，从而向上滚动。我设法通过将<li>元素之间的边距更改为 2px 来消除此问题（我尝试使用 1px 但这还不够）。

在实际的 Jquery 演示页面上，我必须增加到 5px 才能实际工作。

您可以在选择器中更改marginjqyery-ui.css 中的值.ui-menu .ui-menu-item。这在元素之间创建了足够的空间，并且 jquery 不会“混淆”哪个元素应该成为焦点。

标签： jquery-ui