jQuery를 사용하여 테이블 행을보기 (Element.scrollintoview)로 스크롤하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/1805808

  •  05-07-2019
  •  | 
  •  

문제

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

필요한 경우에만 스크롤하는 플러그인 (애니메이션 포함)

나는 a jQuery 플러그인 그것은 주석에서 정확히 말하는 것을 수행합니다 (그리고 또한 또한 정확히 당신이 필요로하는 것). 좋은 점은 요소가 실제로 꺼져있을 때만 컨테이너 만 스크롤한다는 것입니다. 그렇지 않으면 스크롤이 수행되지 않습니다.

이것은 이것만큼 쉽게 작동합니다.

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

과도한 내용이 있고 스크롤바를 보여주는 가장 가까운 스크롤 가능한 조상을 자동으로 찾습니다. 그래서 또 다른 조상이 있다면 overflow:auto 그러나 스크롤 가능하지는 않습니다. 이렇게하면 스크롤 가능한 요소를 제공 할 필요가 없습니다. 때로는 스크롤 가능한 요소조차 알지 못하기 때문에 스크롤 가능한 요소를 알지 못하기도합니다. 사이트가 작동 할 때는 스크롤 가능한 컨테이너가 가능할 수 있습니다).

훨씬 간단한 :

$("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의 스크롤 탑 메소드를 사용할 수 있습니다. http://docs.jquery.com/css/scrolltop

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

어쩌면 그런거?

TR의 상대 위치로 스크롤하는 것이 작동하지 않는 케이스 (오버 플로우 디스크> 테이블> tr> td)를 발견했습니다. 대신 스크롤 탑을 사용하여 오버플로 컨테이너 (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의 답변에 의견을 추가 할 수 없었기 때문에 추가 답변으로 제출합니다.

넓은 테이블에서 테이블 열 스크롤을 볼 필요가 있었기 때문에 왼쪽 기능을 함수에 추가했습니다. 누군가가 언급했듯이, 그것은 스크롤 할 때 점프하지만 내 목적으로 작동했습니다.

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());
  }
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top