在弹出项目上移动时自动滚动答案

【问题标题】：Scroll Auto when move on popup items在弹出项目上移动时自动滚动
【发布时间】：2019-04-24 18:56:44
【问题描述】：

我有以下代码。我在菜单项弹出窗口中添加了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

【问题讨论】：

标签： javascript html css

【解决方案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()

我又fork了Pinfkr，可以找到here

【讨论】：

感谢重播，但这不是一个好的解决方案。当我们在第一个元素上时，它会改变滚动。当弹出选择中的项目跨越弹出边界时，它应该更改滚动。此外，如果页面内还有另一个滚动条，它也适用于它们
欢迎，我更新了我原来的解决方案来解决你提到的 2 个问题。请再次检查。
谢谢@omar.brome。为你竖起大拇指（y）