テーブル行をプログラムでスクロールする

Question

this plunkの目的は、行をプログラムで選択して表をスクロールするために上下キーを使用する表を持つことです。選択した行の背景色が異なります。

キーアップ/ダウン時には、行を2回上下に移動させないようにe.preventDefault()を使用します。問題は、スクロールダウンを開始したときに行が固定され、選択された行が消えることです。これを修正するには？

HTML

<div id="selector" tabindex="0" ng-keydown="scroll($event)" 
      style="width:300px;height:80px;border:1px solid gray;overflow-y:auto"> 
    <table> 
     <tr ng-repeat="item in items"> 
      <td class="td1" ng-class="{'tdactive' : $index==index }">{{item.col}}</td> 
      <td class="td1" ng-class="{'tdactive' : $index==index }">{{item.dsc}}</td> 
     </tr> 
    </table> 
</div> 

Javascriptを

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

app.controller('ctl', function($scope) { 

    document.getElementById("selector").focus(); 

    $scope.items = [ {col:"aaa", dsc:"AAA1"}, {col:"bbb", dsc:"BBB2"} , {col:"ccc", dsc:"CCC3"}, 
      {col:"aaa2", dsc:"AAA21"}, {col:"bbb2", dsc:"BBB22"} , {col:"ccc2", dsc:"CCC23"}, 
      {col:"aaa2", dsc:"AAA21"}, {col:"bbb2", dsc:"BBB22"} , {col:"ccc2", dsc:"CCC23"} ]; 
    $scope.index = 0; 

    $scope.scroll = function(e) { 
     if (e.which === 40) { // down arrow 
      if ($scope.index<$scope.items.length - 1) 
       $scope.index++; 
      e.preventDefault(); 
     } 
     else if (e.which === 38) { // up arrow 
      if ($scope.index>0) 
       $scope.index--; 
      e.preventDefault(); 
     } 
    }; 
}); 

Answer 1

trが現在のビューポートである場合は、あなたのスクロールを防ぐことができますが、id="tr-{{$index}}"

ように、テーブルの行IDを追加する必要がまず第一に

$scope.scroll = function(e) { 
    var parentContainer = document.getElementById("selector"); 
     if (e.which === 40) { // down arrow 
      if ($scope.index<$scope.items.length - 1) 
      { 

      var element = document.getElementById("tr-"+$scope.index); 
      if(isElementInViewport(parentContainer,element)){ 
      e.preventDefault(); 
      } 

       $scope.index++; 
      } 
     } 
     else if (e.which === 38) { // up arrow 
      if ($scope.index>0) 
      { 
      var element = document.getElementById("tr-"+$scope.index); 
      if(!isElementInViewport(parentContainer,element)){ 
      e.preventDefault(); 
      } 
       $scope.index--; 
      } 
     } 
    }; 

function isElementInViewport(parent, el) { 
    if(parent==undefined || el==undefined) 
    return false; 
    var elRect = el.getBoundingClientRect(), 
     parRect = parent.getBoundingClientRect(); 
     //console.log(elRect) 
     //console.log(parRect) 
     var elementHeight = elRect.height; 
    return (
     elRect.top >= parRect.top && 
     elRect.bottom <= parRect.bottom && 
     elRect.bottom+elementHeight<= parRect.bottom 
    ); 
} 

Working Plunker