Question

我已经构建了一个自动完成容器，它显示前四个结果，其余的都是隐藏的，当滚动包含所有结果的内部div元素时可以看到它。

按下向上和向下键时我已经实现了on键，以便让用户轻松浏览结果，但内部div与结果不滚动。

如何滚动包含overflow-y:hidden而不是窗口的元素？

在示例中，只需按下输入框内的任意键并使用箭头向下，您将看到div不滚动

Answer 1

您可以更新脚本以查找所选元素的相对位置并滚动到该脚本：

$(".someInput").on("keyup", function(e) {
   $(".wrapper").show(); 
    if (e.which == 40) {
        $('.element:not(:last-child).element-hover').removeClass('element-hover').next().addClass('element-hover');
    } else if (e.which == 38) {
        $('.element:not(:first-child).element-hover').removeClass('element-hover').prev().addClass('element-hover');    
    }
    //scroll to element:
    $(".wrapper .inner_div").scrollTop(0);//set to top
    $(".wrapper .inner_div").scrollTop($('.element-hover:first').offset().top-$(".wrapper .inner_div").height());//then set equal to the position of the selected element minus the height of scrolling div
});

http://jsfiddle.net/kMzR9/3/

Answer 2

有几种方法可以实现它。并且您的确切解决方案需要考虑您的背景。

无论如何，一种可能的解决方案是在容器 div'位置：相对'和内部 div（包含content）使用' position：absolute '和' top：0px '。当用户按下向上/向下箭头时，您可以相应地更改顶部属性。

CSS：

.container {
    position: relative;
    height: 50px;
    width: 200px;
    overflow: hidden;
    border: 1px solid blue;
}

.content {
    position: absolute;
    top: 0px;
}

JavaScript的：

function moveContent(px) {
    var top = $('.content').position().top;
    $(".content").css("top", top+px);
}

$(document).keydown(function(e){
    if (e.keyCode == 38) { 
       moveContent(-5);
    }
    if (e.keyCode == 40) { 
       moveContent(5);
    }
});

HTML：

<div class="container">
    <div class="content">
        hello 1<br/>
        hello 2<br/>
        hello 3<br/>
        hello 4<br/>
        hello 5<br/>
        hello 6<br/>
    </div>
</div>

请参阅我的示例：http://jsfiddle.net/Kq2Qq/3/

Answer 3

两年过去了......以防万一有人绊倒了这个，就像我一样。除了Moobs的最后两行答案（还不能做任何评论......），普通的Javascript：

（左：如何在纯JS中获取元素），然后：

$innerDiv.scrollTop = $hoveredElement.offsetTop - $innerDiv.clientHeight;

在分配新值之前，似乎没有必要将scrollTop“重置”为零

Answer 4

最近我遇到了同样的问题并通过使用。强调文本 scrollIntoView（）解决了它，示例代码如下。上箭头键和下箭头键的两个功能示例

moveUp: function(e) {
        if (current > 0) {
            current--;
            var allNOdes = document.getElementById('list').childNodes;
            e.stopPropagation();
            if (allNOdes[current]) {
                allNOdes[current].scrollIntoView(true);
            }
        }
    },
    moveDown: function(e) {
        if (current <  10) {
            current++;
            var allNOdes = document.getElementById('list').childNodes;
            e.stopPropagation();
            if (allNOdes[current]) {
                allNOdes[current].scrollIntoView(true);
            }
        }
    }

最初将当前定义为0 HTML：

<div class="wrapper">
 <div class="result" id="list">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
 </div>
</div>

CSS：

.wrapper{
    position: relative;
    height: 150px;
    width: 100px;
    overflow: hidden;
}

.result{
    position: absolute;
}

Answer 5

通过在容器的每个子容器上使用tabIndex="-1"属性，浏览器将自动滚动容器以使具有当前焦点的子容器可见。

演示（香草javascript）：

var listElm = document.querySelector('ul');

// mark the first child (by using "focus")
listElm.firstElementChild.focus();

// event listener
window.addEventListener('keydown', onKeyDown);

// event callback
function onKeyDown(e){
  e.preventDefault();
  
  var selectedElm = document.activeElement,
      // map actions to event's key
      action = {ArrowUp:"previous", Up:"previous", ArrowDown:"next", Down:"next"}
  
  selectedElm = selectedElm[action[e.key] + "ElementSibling"];

  // loop when reached the top or bottom edge
  if( !selectedElm )
    selectedElm = listElm.children[e.key == 'ArrowUp' || e.key == 'Up' ? listElm.children.length - 1 : 0];
  
  selectedElm.focus();
}

ul{ 
  list-style:none; 
  border:1px solid silver; 
  overflow: hidden;     /*      <--- set to hidden by OP's request      */
  max-height: 170px;
  padding: 0;
  margin: 0;
}

li{ 
  padding: .5em; 
  margin:  0;
}

li:focus{ 
  background:cyan; 
  outline:none; 
}

<ul>
  <li tabIndex="-1">item 1</li>
  <li tabIndex="-1">item 2</li>
  <li tabIndex="-1">item 3</li>
  <li tabIndex="-1">item 4</li>
  <li tabIndex="-1">item 5</li>
  <li tabIndex="-1">item 6</li>
  <li tabIndex="-1">item 7</li>
  <li tabIndex="-1">item 8</li>
  <li tabIndex="-1">item 9</li>
  <li tabIndex="-1">item 10</li>
  <li tabIndex="-1">item 11</li>
  <li tabIndex="-1">item 12</li>
  <li tabIndex="-1">item 13</li>
  <li tabIndex="-1">item 14</li>
  <li tabIndex="-1">item 15</li>
</ul>

按键向上滚动内部div

5 个答案:

演示（香草javascript）：