jquery - 滚动到列表中的某个项目

Question

我有一个元素列表，我希望能够在用户选择项目时成为焦点。我尝试在这些对象上使用 Jquery 调用 .focus() 但无济于事。我有什么遗漏的吗？ :)

编辑: 我有一个元素列表 (ul)。我按住 Shift 键并单击起始项，然后按箭头键继续选择。上和下。我真的希望类次选择功能就像在 Finder 或 Windows 资源管理器中一样。当选择不可见的项目时向上滚动(在相同情况下向下滚动)。

有没有方便的 jQuery 插件可以帮我处理这个问题？

编辑2: 弄清楚了一些事情并确定了一个更大的问题。

现在我正在使用名为scrollTo 的 jQuery 插件。我可以使用此插件滚动到列表中的某个元素。但是，“滚动”到某个项目意味着它现在是列表中的第一项，这是不可取的行为。在 Finder 或资源管理器中选择任意数量的项目，您会发现当您使用 Shift 键选择屏幕外的项目时，它只会向下滚动一个项目的空间，而不会使其成为顶部元素。

当然很容易修复。 ;) 我目前正在跟踪顶部屏幕外的当前元素和底部屏幕外的列表中的当前元素。但是，当用户在完成一些滚动后从列表中选择一个项目时，我目前无法判断哪些元素刚刚在视线之外，从而造成了僵局。

有什么想法吗？ :P

Answer 1

您的问题尚不清楚，但如果您正在谈论自动滚动页面(或元素)以便特定元素位于视口(viewport)中，您可以尝试 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 ，具体取决于您的多选解决方案的工作原理。