javascript - 定位元素而不被窗口切断

Question

我有以下 JavaScript 和 HTML。目的是将带有所选 LI 的 UL 定位在与父 DIV 相同的位置，而它正是这样做的。

但是有时候，父DIV向页面顶部靠拢，LI很多，选择的LI向底部靠拢。列表已定位，但是它的顶部在窗口之外。

如何防止列表被 chop ？理想情况下，所选元素仍将使用滚动条定位在父 DIV 的相同位置。

谢谢

var list=$('#myList'),
index=list.find('li.selected').index();
list.find('li.selected').removeClass('selected');
var pos=list.find('li').eq(index).addClass('selected').position();
list.css({top:  0 - pos.top, left:pos.left});

<div style="display:relative">
    <ul id="myList" style="display:absolute">
        <li>xxx</li>
        <li class="selected">xxx</li>
        <li>xxx</li>
        <li>xxx</li>
    </ul>
</div>

Answer 1

您的 div 样式说的是 display:relative 和 display:absolute，而我认为您的意思是 position:relative 和 position :绝对。

编辑:

至于你的定位，你需要手动检查 UL 是否接近顶部，并确保你设置的 top 属性相对于窗口不是负值。在这种情况下，您应该从 0 开始 top li 并在每次迭代中向下爬。