スクロールトップの問題

StackOverflow https://stackoverflow.com/questions/2621792

  •  26-09-2019
  •  | 
  •  

質問

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

<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); しかし、それはうまくいきませんでした。

役に立ちましたか？

解決

あなたは電話する必要があります scrollTop() オーバーフローのある要素について <div> 要素ではなく <ul> エレメント。さらに、つかむ必要があります top に element.position().top そして、あなたはそれを確実にする必要があります <div> 要素は比較的使用されています position: relative, 、以来 top FirstNextの相対親要素に関連しています。

これが次のとおりです 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>

他のヒント

@baluscメソッドを試しましたが、すでに底に到達している場合、巻物は跳ね返ります。それから、実際のスクロールトップがスクロール位置を維持する前に、「.scrolltop（0）」を挿入することで、私は理解しました。

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top