我有以下标记:
<div style="overflow:auto;width:500px;height:100px;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
Mow我正在用jQuery添加一个新的listitem。如果它被隐藏了,我怎么能让它可见(向它滚动div)?
我已经尝试了UL.scrollTop(nuLI.top);
,但它没有用。
答案 0 :(得分:6)
您需要在带溢出的元素上调用scrollTop()
,这是<div>
元素,而不是<ul>
元素。此外,您需要按element.position().top
抓取top
,并且您需要确保<div>
元素相对使用position: relative
定位,因为top
是相对的第一个下一个相对父元素。
这是SSCCE:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2621792</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('#div').scrollTop($('#li3').position().top);
});
</script>
<style>
#div {
position: relative;
overflow: auto;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div id="div">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li id="li3">Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</body>
</html>
答案 1 :(得分:0)
我已经尝试过@BalusC方法,但如果滚动已经到达底部,滚动将会反弹。然后我想通过插入&#34; .scrollTop(0)&#34;在实际的scrollTop之前将保持滚动位置。
$('#div').scrollTop(0).scrollTop($('#li3').position().top);