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

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

72 голосов
/ 27 ноября 2009

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

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

Ответы [ 11 ]

84 голосов
/ 24 сентября 2010

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

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());
  }
}
75 голосов
/ 27 ноября 2009 
var rowpos = $('#table tr:last').position();

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

должен сделать трюк!

29 голосов
/ 16 февраля 2011

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

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

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

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

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

18 голосов
/ 01 апреля 2012

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

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

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

5 голосов
/ 01 октября 2014

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

В приведенном ниже примере для выбора элемента с помощью #yourid.

используется jQuery. 

$( "#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>
3 голосов
/ 12 апреля 2012 
var elem=jQuery(this);
elem[0].scrollIntoView(true);
2 голосов
/ 06 сентября 2016

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

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>
2 голосов
/ 06 сентября 2012

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

$('#container').scrollTop( $('#tr').offset().top - $('#td').offset().top )
2 голосов
/ 27 ноября 2009

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

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

Может быть, что-то подобное?

0 голосов
/ 09 марта 2017

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

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

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());
  }
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...