Как мне прокрутить строку таблицы в поле зрения (element.scrollIntoView) с помощью jQuery?

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

  •  05-07-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение 

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

$('#container').scrollTop(rowpos.top);

должен сделать свое дело!

Другие советы

Это работает лучше, если вам нужно прокрутить до произвольного элемента в списке (а не всегда до конца): 

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());
  }
}

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

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

Это работает так же просто, как это: 

$("table tr:last").scrollintoview();

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

намного проще: 

$("selector for element").get(0).scrollIntoView();

если в селекторе возвращается более одного элемента, get (0) получит только первый элемент.

Этот доступный для выполнения пример показывает, как использовать 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>
<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>

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

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

var table = jQuery( 'table' );
table.scrollTop( table.find( 'tr:last' ).scrollTop() );

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

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

$('#container').scrollTop( $('#tr').offset().top - $('#td').offset().top )

То же самое, что и выше, с небольшими изменениями

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>

$( "#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>

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

Мне нужно было прокрутить столбец таблицы на широкой таблице, поэтому я добавил функции прокрутки влево. Как кто-то упоминал, он прыгает, когда прокручивается, но он работал для моих целей. 

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());
  }
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top