2

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

现在我将列表转换到我想将特定显示<li>为顶部项目的状态。我不能通过使用该scrollTop属性来做到这一点，因为该项目可能离底部很远，以便能够在容器顶部的所需位置滚动它。

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

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

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

我对如何做类似事情的新想法持开放态度！

4

1 回答 1

1

在 IE8 中测试，应该也可以在 IE9 中工作:)

jsFiddle 演示

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 heights，因此只需将其乘以 3 并将结果添加到ul元素高度。
比动画，动画scrollTop你的div

于 2012-08-19T15:06:25.610 回答