jQuery를 사용하여 테이블 행을 뷰 (element.scrollintoView)로 스크롤하려면 어떻게해야합니까?
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)은 첫 번째 항목 만 가져옵니다.
이 실행 가능한 예제는 모든 최신 브라우저에서 지원되는 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>var elem=jQuery(this);
elem[0].scrollIntoView(true);
스크롤 만하고 싶다면 jQuery의 scrollTop 메서드를 사용할 수 있습니다. http://docs.jquery.com/CSS/scrollTop
var table = jQuery( 'table' );
table.scrollTop( table.find( 'tr:last' ).scrollTop() );
아마 그런 거요?
tr의 상대 위치로 스크롤이 작동하지 않는 경우 (overflow div> table> tr> td)를 발견했습니다. 대신 scrollTop을 사용하여 오버플로 컨테이너 (div)를 <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의 답변에 의견을 추가 할 수 없으므로 추가 답변으로 제출하고 있습니다.
I needed to have the table column scroll into view on a wide table, so I added the scroll left features into the function. As someone mentioned, it jumps when it scrolls, but it worked for my purposes.
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());
}
}
'development' 카테고리의 다른 글
| EditText의 완료 버튼에 대한 리스너? (0) | 2020.10.25 |
|---|---|
| 파일 경로에서 비트 맵 / 드로어 블 만들기 (0) | 2020.10.25 |
| 두 개의 float div를 내부로 감싸기 위해 div를 만드는 방법은 무엇입니까? (0) | 2020.10.25 |
| PHP-특정 문자열로 시작하는 배열에서 모든 키 가져 오기 (0) | 2020.10.25 |
| 슬라이스 된 "스크린"터미널에서 위아래로 스크롤하는 방법 (0) | 2020.10.25 |