Question

我有以下JavaScript和HTML。目的是将UL与选定的LI放在与父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:relative和display:absolute，而我认为你的意思是position:relative和position:absolute。

修改

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

定位元件没有被窗户切断

1 个答案: