Question

我有一个固定高度为400px的div，里面有很长的项目列表。点击上一个/下一个链接将引导您完成列表。问题是，一段时间后，当前项目将不在视野范围内。如何使用当前项目移动滚动条？

<!DOCTYPE html>
<html>
<head>

 <style>
   #listContainer{height:400px;width:300px;overflow:auto;background-color:#eee;}
   .selectedItem{background-color:white;color:red;}
 </style>

<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>

  for(var a=[],i=0;i<100;++i){
      a[i]=i;
  }

  currentItem = 0;

  $(document).ready(function() {
    var items = [];
    $.each(a, function(i,x){

      items.push('<li id="item_'+x+'">item #'+x+'</li>');

    });

    $('#list').append(items.join(''));

    $('#next').click(function() { updateList(); currentItem += 1; });
    $('#prev').click(function() { updateList(); currentItem -= 1; });

  });

  function updateList(){
     $('#listContainer').find('.selectedItem').removeClass('selectedItem');
     $('#item_'+currentItem).addClass('selectedItem');
  }
</script>

</head>
<body>

  <a href="javascript:void(0)" id="prev"><< PREV ITEM</a> | <a href="javascript:void(0)" id="next">NEXT ITEM >></a>

  <div id="listContainer">
      <ul id="list"></ul>
  </div>

</body>
</html>

Answer 1

您应该能够使用（非jQuery）DOM方法element.scrollIntoView()：

$('#item_'+currentItem).addClass('selectedItem')[0].scrollIntoView(true);

// or
$('#item_'+currentItem)[0].scrollIntoView(true);
// or
document.getElementById('item_'+currentItem).scrollIntoView(true);

[0]只是从jQuery对象获取对实际DOM元素的引用 - 假设您通过id选择我假设只有一个元素匹配选择器。当然，大多数jQuery方法设置为允许链接，您可以在现有.addClass()的末尾执行此操作，而不是再次选择元素。

（看看.scrollIntoView() doco来决定是否将true或false（或什么都没有）传递给方法。）

如何在溢出的div中保持当前项目的可见性？

1 个答案: