jQuery를 사용하여 테이블의 행을 보기(element.scroll in View)로 스크롤하려면 어떻게 합니까?
jQuery를 사용해서 동적으로 테이블에 행을 추가하고 있는데요.tableA안에 있습니다.div가 있는overflow:auto따라서 수직 스크롤 바를 발생시킵니다.
이제 컨테이너를 자동 스크롤합니다.div맨 끝 줄까지jQuery 버전은 무엇입니까?tr.scrollintoView()?
항상 맨 아래로 스크롤하는 것보다 목록의 임의 항목으로 스크롤해야 하는 경우 다음이 더 효과적입니다.
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());
}
}
var rowpos = $('#table tr:last').position();
$('#container').scrollTop(rowpos.top);
속임수를 써야 합니다!
필요한 경우에만 (애니메이션과 함께) 스크롤하는 플러그인
저는 jQuery 플러그인을 작성했는데, 이 플러그인은 주석에 명시된 것과 정확하게 필요한 것을 수행합니다.좋은 점은 요소가 실제로 꺼졌을 때만 용기를 스크롤한다는 것입니다.그렇지 않으면 스크롤이 수행되지 않습니다.
다음과 같이 쉽게 작동합니다.
$("table tr:last").scrollintoview();
내용이 초과되고 스크롤 막대가 표시되는 가장 가까운 스크롤 가능한 상위 항목을 자동으로 찾습니다.그래서 만약 또 다른 조상이 있다면,overflow:auto스크롤할 수 없습니다.이렇게 하면 어떤 요소가 스크롤 가능한지도 모르기 때문에 스크롤 가능한 요소를 제공할 필요가 없습니다(콘텐츠/마스터가 개발자와 독립적이어서 내가 통제할 수 없는 쉐어포인트 사이트에서 이 플러그인을 사용하고 있습니다 - 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>스크롤만 하고 싶다면 jQuery의 스크롤Top 방식을 사용할 수 있습니다.http://docs.jquery.com/CSS/scrollTop
var table = jQuery( 'table' );
table.scrollTop( table.find( 'tr:last' ).scrollTop() );
그런 거?
var elem=jQuery(this);
elem[0].scrollIntoView(true);
tr의 상대위치로 스크롤이 되지 않는 경우(overflow div > table > tr > td)를 찾았습니다.대신 스크롤을 사용하여 오버플로 컨테이너(div)를 스크롤해야 했습니다.Top to<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>위 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());
}
}
이것이 제가 시도한 것이고 이것이 제 프로젝트를 위한 제 작업 솔루션입니다.
function scrollToView($elem) {
var $parent = $elem.parent();
$parent.scrollTop(0);// reset parent scroll to calculate element's current position
var viewH = $parent.height()-$elem.height();// calculate viewing pane height
var elemTop = $elem.position().top;
var viewMultiplier = Math.floor( elemTop / viewH); // calculate view multiplier
$parent.scrollTop(viewMultiplier * viewH);
}
다음은 원하는 행으로 스크롤하는 예입니다.
function scrollToPositionTableRow(container, elementFirst, elementYouWantScroll) {
var rowpos = $(elementYouWantScroll).position();
var tableHeader = $($(elementFirst)).outerHeight();
$(container).scrollTop(rowpos.top - tableHeader);
}
언급URL : https://stackoverflow.com/questions/1805808/how-do-i-scroll-a-row-of-a-table-into-view-element-scrollintoview-using-jquery
'programing' 카테고리의 다른 글
| 몽고에서 Spring Boot을 사용하여 생 JSON을 저장하는 방법 (0) | 2023.09.26 |
|---|---|
| Oracle PL/SQL의 웹 서비스 사용 (0) | 2023.09.26 |
| jQuery의 요소 총 너비(패딩 및 테두리 포함) (0) | 2023.09.26 |
| Excel 시트의 행 높이를 프로그래밍 방식으로 변경 (0) | 2023.09.26 |
| 구조물에 대한 포인터의 정의를 입력 (0) | 2023.09.26 |