テーブルにスクロールバーがあるときにHTMLテーブルの選択された行に移動

Question

テーブルがあり、ユーザーがテーブルの行をクリックしたときにその行の選択したプロパティを使用しています。他のパネルで私は地図を持っており、それはすべての従業員がそれに表示されています。表の各行には一意のIDがあり、ユーザーがマップ上の従業員イメージをクリックすると、表の従業員行が強調表示されます。テーブルに40行がある場合は、垂直スクロールバーが表示されます。 ID 40の従業員をクリックすると、テーブルの行が選択されますが、テーブルにはスクロールバーがあり、スクロールバーによって隠されているため、ビューに行が表示されません。され、次の私の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; 
    } 

    } 

});