проблема с scrollTop - PullRequest
Новая
       13

проблема с scrollTop

1 голос
/ 12 апреля 2010

У меня есть следующая разметка: 

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

Теперь я добавляю новый элемент списка с помощью jQuery. Как я могу сделать его видимым (прокручивая к нему div), если он скрыт?

Я пытался UL.scrollTop(nuLI.top);, но это не сработало.

Ответы [ 2 ]

6 голосов
/ 12 апреля 2010

Вам необходимо вызвать scrollTop() для элемента с переполнением, который является элементом <div>, а не элементом <ul>. Кроме того, вам нужно захватить top на element.position().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>
0 голосов
/ 27 ноября 2013

Я пробовал метод @BalusC, но свиток отскочит назад, если он уже достиг дна.Затем я понял, вставив «.scrollTop (0)», прежде чем фактический scrollTop сохранит позицию прокрутки

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

...