Я динамически добавляю строки в таблицу с помощью 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) получит только первый элемент.
var elem=jQuery(this);
elem[0].scrollIntoView(true);
Этот примерный пример показывает, как использовать 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>Если вы просто хотите прокручивать, вы можете использовать метод 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 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>
$( "#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>Я не мог добавить комментарий к 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());
}
}