Как прокрутить строку таблицы в представление (элемент.scrollintoView) с помощью jQuery?

Question

Как прокрутить строку таблицы в представление (элемент.scrollintoView) с помощью jQuery?

Я динамически добавляю строки в таблицу с помощью jQuery.
Элемент table внутри div имеющего overflow:auto таким образом, вызывая вертикальную полосу прокрутки.

Я теперь хочу автопрокрутка мой контейнер div до последней строки. Что такое jQuery версия tr.scrollintoView()?

859 11

jQuery scroll

11 ответов:

Comments

Ничего не найдено.

Gausie · Accepted Answer · 2009-11-26 23:53:10

var rowpos = $('#table tr:last').position();

$('#container').scrollTop(rowpos.top);
должен делать свое дело!

Abhijit Rao · Accepted Answer · 2010-09-24 01:26:41

это работает лучше, если вам нужно прокрутить произвольный элемент в списке (а не всегда в нижней части):
function scrollIntoView(element, container) {
 var containerTop = $(container).scrollTop(); 
 var containerBottom = containerTop + $(container).height(); 
 var elemTop = element.offsetTop;
 var elemBottom = elemTop + $(element).height(); 
 if (elemTop < containerTop) {
 $(container).scrollTop(elemTop);
 } else if (elemBottom > containerBottom) {
 $(container).scrollTop(elemBottom - $(container).height());
 }
}

Robert Koritnik · Accepted Answer · 2011-05-02 15:04:26

плагин, который прокручивает (с анимацией) только при необходимости

Я написал плагин jQuery что делает именно то, что он говорит на олово (а также именно то, что требуется). Хорошо, что он будет прокручивать контейнер только тогда, когда элемент фактически выключен. В противном случае прокрутка не будет выполнена.

это работает так же просто, как это:
$("table tr:last").scrollintoview();
он автоматически находит ближайший прокручиваемый предок, который имеет избыточное содержимое и показывает полосы прокрутки. Так что если есть еще один предок с overflow:auto но не прокручивается будет пропущен. Таким образом, вам не нужно предоставлять прокручиваемый элемент, потому что иногда вы даже не знаете, какой из них прокручивается (я использую этот плагин на своем сайте Sharepoint, где контент/мастер независим от разработчика, поэтому он вне моего контроля - HTML может измениться, когда сайт работает, поэтому можно прокручивать контейнеры).

Mor Shemesh · Accepted Answer · 2012-04-18 05:02:53

гораздо проще:
$("selector for element").get(0).scrollIntoView();
если в селекторе возвращается более одного элемента, get (0) получит только первый элемент.

zuckerhut · Accepted Answer · 2012-04-18 05:02:41

var elem=jQuery(this);
elem[0].scrollIntoView(true);

3

2012-04-18 05:02:41

Barry Staes · Accepted Answer · 2014-10-01 13:20:42

этот запускаемый пример показывает, как использовать scrollIntoView (), который поддерживается во всех современных браузерах: https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView#Browser_Compatibility

В приведенном ниже примере используется jQuery для выбора элемента с #yourid.
$( "#yourid" )[0].scrollIntoView();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
Hello world.
..
..
..
..

William · Accepted Answer · 2009-11-26 23:53:44

Если вы просто хотите прокрутить, вы можете использовать метод scrollTop jQuery. http://docs.jquery.com/CSS/scrollTop

что-то вроде этого может быть?

user1338062 · Accepted Answer · 2012-09-06 10:53:21

Я нашел случай (переполнение div > таблица > tr > td), в котором прокрутка до относительного положения tr не работает. Вместо этого мне пришлось прокрутить контейнер переполнения (div) с помощью scrollTop до <tr>.offset().top - <table>.offset().top. Например:
$('#container').scrollTop( $('#tr').offset().top - $('#td').offset().top )

Arun Prasad E S · Accepted Answer · 2018-02-28 04:48:10

то же самое сверху с небольшой модификацией

function focusMe() {
       var rowpos = $('#FocusME').position();
        rowpos.top = rowpos.top - 30;
        $('#container').scrollTop(rowpos.top);
    }

<html>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<body>
    <input type="button" onclick="focusMe()" value="focus">
    <div id="container" style="max-height:200px;overflow:scroll;">
        <table>
            <tr>
                <td>1</td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td></td>
            </tr>
            <tr>
                <td>5</td>
                <td></td>
            </tr>
            <tr>
                <td>6</td>
                <td></td>
            </tr>
            <tr>
                <td>7</td>
                <td></td>
            </tr>
            <tr>
                <td>8</td>
                <td></td>
            </tr>
            <tr>
                <td>9</td>
                <td></td>
            </tr>
            <tr id="FocusME">
                <td>10</td>
                <td></td>
            </tr>
            <tr>
                <td>11</td>
                <td></td>
            </tr>
            <tr>
                <td>12</td>
                <td></td>
            </tr>
            <tr>
                <td>13</td>
                <td></td>
            </tr>
            <tr>
                <td>14</td>
                <td></td>
            </tr>
            <tr>
                <td>15</td>
                <td></td>
            </tr>
            <tr>
                <td>16</td>
                <td></td>
            </tr>
            <tr>
                <td>17</td>
                <td></td>
            </tr>
            <tr>
                <td>18</td>
                <td></td>
            </tr>
            <tr>
                <td>19</td>
                <td></td>
            </tr>
            <tr>
                <td>20</td>
                <td></td>
            </tr>
        </table>
    </div>
</body>

</html>

Ajay Ram · Accepted Answer · 2016-11-12 14:26:06

$( "#yourid" )[0].scrollIntoView();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p id="yourid">Hello world.</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>

wuijin · Accepted Answer · 2017-03-09 17:44:36

Я не мог добавить комментарий к ответу Абхиджита РАО выше, поэтому я представляю это как дополнительный ответ.

Мне нужно было прокрутить столбец таблицы в поле зрения на широкой таблице, поэтому я добавил функции прокрутки влево в функцию. Как кто-то упомянул, он прыгает, когда он прокручивается, но он работал для моих целей.
function scrollIntoView(element, container) {
 var containerTop = $(container).scrollTop();
 var containerLeft = $(container).scrollLeft();
 var containerBottom = containerTop + $(container).height();
 var containerRight = containerLeft + $(container).width();

 var elemTop = element.offsetTop;
 var elemLeft = element.offsetLeft;
 var elemBottom = elemTop + $(element).height();
 var elemRight = elemLeft + $(element).width();

 if (elemTop < containerTop) {
 $(container).scrollTop(elemTop);
 } else if (elemBottom > containerBottom) {
 $(container).scrollTop(elemBottom - $(container).height());
 }

 if(elemLeft < containerLeft) {
 $(container).scrollLeft(elemLeft);
 } else if(elemRight > containerRight) {
 $(container).scrollLeft(elemRight - $(container).width());
 }
}