jquery - IE8/9 中溢出滚动列表的相对顶部位置

Question

我有一个互动，我有一个 <ul>有一长串<li> s 包裹在 <div> 中使它们可滚动的容器。

现在我将列表转换为我想要显示特定 <li> 的状态作为最上面的元素。我不能使用 scrollTop 来做到这一点属性，因为该元素可能离底部很远，无法将其滚动到容器顶部的所需位置。

这就是为什么我将 ul 的相对顶部位置设置为所需值的原因。

请看一下这个 jsFiddle:http://jsfiddle.net/pJfNp/13/

在除 IE8 和 9 之外的所有浏览器中，事件/红色元素显示在顶部，但 Internet Explorer 似乎无法“分离”<ul> 的底部来自 <div> ，它以某种方式固定在那里。如果我尝试使用 scrollTop 会发生什么将其显示为第一项。

我乐于接受关于如何做类似事情的新想法!

Answer 1

在 IE8 中测试过，应该也能在 IE9 中工作:)

jsFiddle demo

var liHeight = $('li.active').height();
$('ul').height( $('ul').height() + (liHeight*3) );
var activePos = $('li.active').position().top;
$('div').animate({scrollTop:activePos},1000);

如果您有时需要显示最后一个 li 这意味着您需要额外的 3 个 li 高度 所以只需将它乘以 3 并将结果添加到 ul 元素高度。
除了动画之外，还可以为 div

的 scrollTop 设置动画