JQuery Пользовательский интерфейс автозаполнения прокручиваемого контента прокручивается вверх при движении мыши - PullRequest
0 голосов
/ 13 февраля 2020

Я недавно реализовал JQuery Комбокс с автозаполнением пользовательского интерфейса, и все отлично работает вместо одной ошибки, которую я нашел, и не могу найти решение. Я не могу опубликовать свой код здесь, поскольку это код компании, но я увидел, что проблема видна на демонстрационной странице jquery ui:

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

Теперь, если вы введете «a» в поле ввода, вы получите панель с результатами автозаполнения, которая представляет собой <ul> элемент с <li> элементами внутри и, поскольку он имеет заданную высоту, будет вертикальная прокрутка что идеально. Теперь поместите указатель мыши на панель с результатами, прокрутите список с помощью колесика мыши, а затем просто переместите указатель мыши обратно в поле ввода. Вы увидите, что список начинает прокручиваться вверх. Сколько бы раз вы ни делали это движение указателя мыши вверх и вниз, список будет продолжать расти, что является реальной проблемой для моей реализации.

Я создал обычный список <ul> с заданной высотой и переполнением. y свойство имитировать прокручиваемую панель пользовательского интерфейса, но у меня нет этой проблемы.

Вот .gif с проблемой, и каждый может проверить на своей странице. Это происходит с Chrome browser

screen gif

ОБНОВЛЕНИЕ

!!! РЕШЕНО !!!

После Во время игры я обнаружил, что проблема в jquery, пытаясь сфокусировать верхний элемент. По какой-то причине он решает, что элемент, который должен быть в фокусе, на самом деле является предыдущим элементом в списке, которого нет даже в области просмотра. Поэтому при фокусировке на этом элементе меню «перепрыгивает» на предыдущий элемент и, следовательно, прокручивается вверх. Мне удалось устранить эту проблему, изменив разницу между элементами <li> до 2px (я пробовал с 1px, но этого недостаточно).

На реальной демонстрационной странице Jquery мне пришлось увеличить ее до 5px, чтобы она действительно работала.

Вы можете изменить значение margin в jqyery-ui. css в .ui-menu .ui-menu-item селектор. Это создает достаточно места между элементами, и jquery не «запутывается», какой элемент должен быть в фокусе.

enter image description here

...