Question

我有以下代码。我在菜单项弹出窗口中添加了overflow-y和max-height css属性。在搜索文本框内，键入“ a”并按下键，则项目选择将相应更改。但是滚动不会移动。我希望在弹出菜单项上移动时滚动自动移动

#myInputautocomplete-list{
          max-height:200px !important;
        overflow-y:auto !important;
}

<div class="autocomplete" style="width:300px;">
  <input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input type="submit">

Here Plnfkr

Answer 1

您可以使用Element.scrollIntoView（）在这种情况下可以帮助您滚动。我在函数inp.addEventListener("keydown", function(e)

的末尾添加了这两行

if(x && x[currentFocus])
    x[currentFocus].scrollIntoView();

我分叉了Pinfkr here
有关scrollIntoView的文档可以找到here

更新：

当我们在第一个元素上时，它会更改滚动。它应该改变当弹出选择内的项目跨越弹出边界时滚动

我通过添加一个函数来检查滚动元素是否可见来解决此问题，仅当下拉菜单中的元素不可见时才应用滚动移动。

// Return true/false if element is visible in relation to a given scrolling container
// Use to see if an element is visible within a scrolling div for example.
function isScrolledElementVisible(o_ele, o_container){
    var v_containerTop = o_container.scrollTop;
    var v_containerBottom = v_containerTop + o_container.offsetHeight;
    var v_elemTop = o_ele.offsetTop;
    var v_elemBottom = o_ele.offsetTop + o_ele.offsetHeight; 
    return ((v_elemBottom >= v_containerTop) && (v_elemTop <= v_containerBottom)
      && (v_elemBottom <= v_containerBottom) &&  (v_elemTop >= v_containerTop) );
}

作为参考，我从here那里获得了该功能

如果页面内还有其他滚动，则也适用于它们也

要解决此问题，我仅手动设置下拉菜单的scrollTop，而不是使用scrollIntoView（），这样不会影响其他滚动

  var topPos = x[currentFocus].offsetTop;
  o_container.scrollTop = topPos;

我从here学会了如何不依赖于scrollIntoView（）

我再次分叉了Pinfkr，可以发现它here

移动弹出项目时滚动自动

1 个答案: