jquery - scrollTopの問題

Question

私は次のマークアップを持っています：

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

JQueryを使用して新しいlistitemを追加しています。非表示になっている場合に表示する（divをスクロールする）にはどうすればよいですか？

試しましUL.scrollTop(nuLI.top);たが、うまくいきませんでした。

score 6 · Accepted Answer

scrollTop()オーバーフローのある要素を呼び出す必要があります。これは、<div>要素ではなく<ul>要素です。topさらに、 byを取得する必要があり、はを使用して要素が相対的に配置element.position().topされていることを確認する必要があります。これは、が最初の次の相対的な親要素に対して相対的であるためです。<div>position: relativetop

これが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>

score 0 · Accepted Answer

@BalusCメソッドを試しましたが、すでに一番下に達した場合、スクロールは跳ね返ります。次に、実際のscrollTopがスクロール位置を維持する前に「.scrollTop（0）」を挿入することで理解しました。

$('#div').scrollTop(0).scrollTop($('#li3').position().top);

jquery - scrollTopの問題

2 に答える 2

Related

Reference