테이블에 스크롤 막대가있을 때 HTML 테이블의 선택된 행으로 이동

Question

테이블이 있고 사용자가 테이블의 행을 클릭 할 때 행의 선택된 속성을 사용하고 있습니다. 다른 패널에는지도가 있으며 모든 직원이지도에 표시됩니다. 테이블의 각 행은 고유 한 ID를 가지며 사용자가 맵에서 직원 이미지를 클릭하면 테이블의 직원 행이 강조 표시됩니다. 이제 테이블에 40 개의 행이 있으면 세로 스크롤 막대가 표시됩니다. Id가 40 인 직원을 클릭하면 테이블의 행이 선택되지만 테이블에 스크롤 막대가 있고 스크롤 막대에 의해 숨겨져 있기 때문에 행이 뷰에 표시되지 않습니다. 는 IS 다음 내 HTML 코드 : 나는지도에서 직원의 이미지를 클릭하면 이제 다음 코드가 호출

<div class="customTable"> 
    <table class="table" id="employeesTable"> 
     <thead class="active"> 
      <tr> 
       <th>employee ID</th> 
       <th>employee State</th> 
      </tr> 
     </thead> 
     <tbody> 
      <div> 
       <tr ng-repeat="employee in employees ng-class="{'selected':employee.empId == selectedRow}" id="row{{employee.empId}}" " style="cursor: pointer"> 
        <td>{{employee.empId}}</a></td> 
        <td><span>{{employee.employeeState}}</span></td>             
       </tr> 
      </div> 
     </tbody> 
    </table> 
</div> 

:

$scope.employeeDisplay = function(employee){ 
      //to display employee in the table 
      //called when the employee is clicked on the map 
      var id = employee.empId; 
      $('#employeesTable tr').eq(1).removeClass('selected'); 
      $scope.selectedRow = empId //so based on the employee is that particular row is highlighted in the table 
     } 

는 당신이 날 테이블이 자동으로 표시 수있는 방법을 알려 수 행이 초기 뷰에 없으면 선택된 행에 테이블이 20 행만 표시되고 ID가 40 인 직원이 선택되면 테이블이 선택된 행으로 스크롤해야합니다.

Answer 1

다음은 찾고자하는 기본 동작을 가진 JSFiddle입니다. 아직 보이지 않는 경우 40 번째 요소로 스크롤됩니다.

https://jsfiddle.net/reid_horton/odd0omk7/1/

그것은 따라서 요소는 뷰포트의 상단에있는 지점으로 스크롤 스크롤 보려는 항목의 offsetTop 속성에 스크롤 요소의 scrollTop 속성을 설정하여 작동합니다.

항목이 이미 표시되어 있는지 확인하려면 스크롤 막대의 현재 위치와 요소의 위치를 ​​비교합니다. 그런 다음 뷰포트의 높이를 사용하여 요소가 볼 수있는 값 범위에 있는지 확인합니다.

HTML

<div ng-app="myApp" ng-controller="MainCtrl"> 
    <div class="scrolling-container"> 
    <table> 
     <tr ng-repeat="k in items"> 
     <td>{{ k }}</td> 
     </tr> 
    </table> 
    </div> 
    <!-- As an example, scroll to the 40th element --> 
    <button ng-click="scrollItemIntoView()"> 
    Scroll to Bottom 
    </button> 
</div> 

JS

var app = angular.module("myApp", []); 

app.controller("MainCtrl", function($scope) { 

    // Populate the table with 0..100 
    $scope.items = []; 
    for (var i = 0; i < 100; i++) { 
    $scope.items.push(i); 
    } 

    // This function is called when the button is clicked. 
    $scope.scrollItemIntoView = function() { 

    var scrollElement = $('.scrolling-container')[0]; 
    var itemToView = $('tr')[40]; 

    // This is where it all goes down. 
    if (!itemIsInViewport(itemToView)) { 
     scrollElement.scrollTop = itemToView.offsetTop; 
    } 

    // Determines if the item is already in view. 
    function itemIsInViewport(item) { 
     var $scrollElement = $('.scrolling-container'); 
     var upperBound = item.offsetTop; 
     var lowerBound = item.offsetTop - $scrollElement.innerHeight(); 
     var currentPosition = $scrollElement.scrollTop(); 
     return lowerBound < currentPosition && currentPosition < upperBound; 
    } 

    } 

});