滚动到列表中的项目

时间:2010-08-13 16:31:21

标签: jquery scroll focus scrollbar

我有一个我想在用户选择项目时能够聚焦的元素列表。我试过用Jquery在这些对象上调用.focus()无济于事。有什么我想念的吗? :)

编辑: 我有一个元素列表(ul)。我转动点击一个起始项目,然后按箭头键继续选择。上和下。我真的希望换档选择的功能就像它在Finder或Windows资源管理器中一样。选择一个不可见的项目时向上滚动(对于相同的情况,向下滚动)。

有没有方便的jQuery插件来处理这个问题?

EDIT2: 想出一些事情并确定了一个更大的问题。

现在我正在使用名为scrollTo的jQuery插件。我可以使用这个插件滚动到我的列表中的元素。但是,“滚动”到项目意味着它现在是列表中的第一个项目,这不是理想的行为。在Finder或资源管理器中选择任意数量的项目,并看到当你使用shift-arrow选择一个在屏幕外的项目时,它只会向下滚动一个项目的空间并且不会使它成为顶层元素。

当然容易修复。 ;)我目前正在跟踪顶部屏幕外的当前元素以及列表中位于底部的当前元素。但是,当用户在完成一些滚动之后从列表中选择一个项目时,我目前无法分辨出哪些元素在视线之外,造成了一个僵局。

有什么想法吗? :P

1 个答案:

答案 0 :(得分:4)

您的问题并不清楚,但如果您正在谈论自动滚动页面(或元素)以使特定元素位于视口中,您可以尝试scrollTo plugin

$.scrollTo('#something'); // scrolls the whole page so #something is in view
$('#mydiv').scrollTo('#somethingelse'); // scrolls the (scrollable) div

修改:您的问题更新提供了更深入了解您正在寻找的内容。我不清楚你用什么方法来实现班次选择(或者你实际上是在扩展问题以询问如何做到这一点)。但是假设你还在询问滚动条,我会在附加到你选择中添加另一个列表项时触发的任何事件(自定义?)的函数中添加滚动调用。

例如,假设您每次选择list_expanded时都会触发名为<li>的自定义事件,您可以尝试这样的事情:

$(document).ready( function(){
  $('ul#mylist').delegate('li','list_expanded', function(){
    $(this).scrollTo();
  });
});

显然,您也可以使用“常规”事件,例如click,具体取决于您的多选解决方案的工作方式。