Подтвердить что ты не робот

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

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

Ответ 3

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

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

Это работает так просто:

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

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

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

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

Ответ 7

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


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

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

Ответ 8

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

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

Ответ 9

То же, что и выше, с небольшой модификацией

function foucsMe() {
       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="foucsMe()" 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>

Ответ 10

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

Ответ 11

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

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

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