Question

当我们在文本框中输入一些文本时，它与列表匹配并显示下拉菜单（我们正在使用Typeahead JavaScript库来实现此目的）。一切正常。

出现问题，当我将鼠标指向下拉菜单中的第二项时，它会自动向下滚动到列表的末尾。

例如：假设下拉菜单中有5个项目，如果将鼠标悬停在第二个项目上，则下拉菜单会自动向下滚动到最后一个项目。

因此，结果无法选择第二个元素。下拉菜单会自动向下滚动。

如何在鼠标悬停时避免下拉菜单自动向下滚动。

HTML：

<input type="text" 
        typeahead="data for data in getData()" 
        typeahead-on-select="setData($item, index)" 
        typeahead-min-length="1" 
        typeahead-select-on-blur="true" 
        aria-autocomplete="list" 
        aria-expanded="true" 
        aria-owns="typeahead-048-3181" 
        aria-activedescendant="typeahead-048-3181-option-1" />



        <ul class="dropdown-menu ng-isolate-scope" ng-show="isOpen()" ng-style="{top: position.top+'px', left: position.left+'px'}" style="display: block; top: 982px; left: 31px;" role="listbox" aria-hidden="false" typeahead-popup="" id="typeahead-048-3181" matches="matches" active="activeIdx" select="select(activeIdx)" query="query" position="position">
            <!-- ngRepeat: match in matches track by $index -->
            <li ng-repeat="match in matches track by $index" should-focus="isActive($index)" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="typeahead-048-3181-option-0" class="ng-scope">
                <a tabindex="-1" bind-html-unsafe="match.label | typeaheadHighlight:query" class="ng-scope ng-binding">Data1</a>
            </li><!-- end ngRepeat: match in matches track by $index -->
            <li ng-repeat="match in matches track by $index" should-focus="isActive($index)" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="typeahead-048-3181-option-1" class="ng-scope active">
                <a tabindex="-1" bind-html-unsafe="match.label | typeaheadHighlight:query" class="ng-scope ng-binding">Data2</a>
            </li><!-- end ngRepeat: match in matches track by $index --><li ng-repeat="match in matches track by $index" should-focus="isActive($index)" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="typeahead-048-3181-option-2" class="ng-scope">
                <a tabindex="-1" bind-html-unsafe="match.label | typeaheadHighlight:query" class="ng-scope ng-binding">Data3</strong>34</a>
            </li><!-- end ngRepeat: match in matches track by $index -->
        </ul>

CSS：

.dropdown-menu > li > a {
    padding: 10px 20px;
    white-space: normal;
    color: #494c61 !important;
    cursor: pointer;
}

.dropdown-menu {
    margin-top: 0px;
    width: 91%;
    overflow-y: auto;
    max-height: 200px;
}

JavaScript： AngularJS指令：shouldFocus

return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(attrs.shouldFocus, function (newVal, oldVal) {
                    if (newVal && element.prop("class").indexOf("active")) {
                        var par = element.parent("ul");
                        var scrollingTo = element.offset().top - par.offset().top + par.scrollTop();
                        par.scrollTop(scrollingTo);
                    }
                });
            }
        }

当我将鼠标悬停在下拉菜单中时，它会自动向下滚动

0 个答案: