Як прокрутити рядок таблиці у вигляд (element.scrollintoView) за допомогою jQuery?

Question 1

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

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

Question 2

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

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

повинен зробити трюк!

Question 3

Це наступне працює краще, якщо вам потрібно прокрутити довільний елемент у списку (а не завжди до кінця):

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

Question 4

Плагін, який прокручується (з анімацією) лише за потреби

Я написав плагін jQuery, який робить саме те, що написано на жерсті (а також саме те, що вам потрібно ). Добре в тому, що він буде прокручувати контейнер лише тоді, коли елемент насправді вимкнено. Інакше прокрутка виконуватися не буде.

Це працює так просто:

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

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

Question 5

набагато простіше:

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

якщо в селекторі повертається більше одного елемента, get (0) отримає лише перший елемент.

Question 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>

Розгорніть фрагмент

Question 7

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

Question 8

Якщо ви просто хочете прокрутити, ви можете скористатися методом jQuery scrollTop. http://docs.jquery.com/CSS/scrollTop

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

Щось подібне, можливо?

Question 9

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

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

Question 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>

Розгорніть фрагмент

Question 11

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

Розгорніть фрагмент

Question 12

Я не міг додати коментар до відповіді Абхіджіта Рао вище, тому подаю це як додаткову відповідь.

Мені потрібно було, щоб стовпець таблиці прокручувався на широкій таблиці, тому я додав ліві функції прокрутки у функцію. Як хтось згадував, він стрибає, коли прокручується, але це спрацювало для моїх цілей.

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