滚动顶部的问题

发布于 2024-08-28 17:12:49 字数 373 浏览 7 评论 0原文

我有以下标记：

<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 添加一个新的列表项。如果它被隐藏，如何使其可见（将 div 滚动到它）？

我尝试过 UL.scrollTop(nuLI.top); 但它不起作用。

原文

I have the following markup:

<div style="overflow:auto;width:500px;height:100px;">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

Mow I'm adding a new listitem with jQuery. How can I make it visible (scrolling the div to it) in case it's hidden?

I've tried UL.scrollTop(nuLI.top); but it didn't work.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

染火枫林 2024-09-04 17:12:49

您需要在溢出的元素（即

元素，而不是

scrollTop()

element.position().top< 获取 top /code>

并且您需要确保 
 元素使用 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>

You need to call scrollTop() on the element with the overflow, which is the <div> element, not the <ul> element. Further you need to grab the top by element.position().top and you need to ensure that the <div> element is positioned relatively using position: relative, since the top is relative to the firstnext relative parent element.

Here's an 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>

回复收藏 0 原文