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

Question

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

但是，有时父DIV 是靠近页面顶部的，有很多LI，而选定的LI 是靠近底部的。该列表已定位，但是，它的顶部不在窗口中。

如何防止列表被截断？理想情况下，所选元素仍将使用滚动条定位在父 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:relativeand display:absolute，而我认为你的意思是position:relativeand position:absolute。

编辑：

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