当所选行是最后一行之前的行时自动滚动表格
Posted
技术标签:
【中文标题】当所选行是最后一行之前的行时自动滚动表格【英文标题】：Automatically scroll table when the selected row is the row before last row 【发布时间】：2017-11-07 08:30:22 【问题描述】：我有一个与滚动表有关的问题。
加载页面时，第一行（ROW 1）将是默认选择行（突出显示的行）。如果我们单击下一个按钮，下一行将被选中并突出显示。问题是如果选择了 ROW >= 8（例如 ROW 9、10...），表格不会自动滚动，因此我们看不到当前选择的内容也被突出显示。 行为应如下图所示：
选择第 8 行时，表格应自动滚动。此时，下一行（第 9 行）是可见的，顶部的行应该是不可见的。
我的目的是在当前选定的行我也可以看到下一行。当我单击下一个/上一个按钮时，表格应该滚动，直到到达最后一个可见行，然后该行将成为最后一行之前的行。
我不知道如何解决这个问题。 请帮帮我。
最好的问候， 肯。
【问题讨论】：
没有提供可验证的示例，但您可以利用$anchorScroll 来实现这一点
【参考方案1】：
下面的 sn-p 利用窗口滚动到 table 的特定 tr。
在每个下一个/上一个单击分别增加/减少 selectedIndex 并滚动到表中的行索引。
var app = angular.module("app", []);
app.controller("ctrl", function($scope)
$scope.selectedIndex = 0;
$scope.rows = ["Row1", "Row2", "Row3", "Row4", "Row5", "Row6", "Row7", "Row8", "Row9", "Row10", "Row11", "Row12", "Row13", "Row14", "Row15", "Row16", "Row17", "Row18"];
$scope.NextRow = function()
$scope.selectedIndex = $scope.selectedIndex === $scope.rows.length - 1 ? $scope.rows.length - 1 : $scope.selectedIndex + 1;
var w = $(window);
var row = $('table').find('tr').eq($scope.selectedIndex);
if (row.length)
w.scrollTop(row.offset().top - (w.height() / 2));
$scope.PrevRow = function()
$scope.selectedIndex = $scope.selectedIndex === 0 ? 0 : $scope.selectedIndex - 1;;
var w = $(window);
var row = $('table').find('tr').eq($scope.selectedIndex);
if (row.length)
w.scrollTop(row.offset().top - (w.height() / 2));
);body
padding-top: 50px;
.anchor
border: 2px dashed DarkOrchid;
padding: 5px 5px 5px 5px;
.fixed-header
background-color: rgba(0, 0, 0, 0.2);
height: 50px;
position: fixed;
top: 0;
left: 0;
right: 0;
.fixed-header>a
display: inline-block;
margin: 5px 15px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
<div class="fixed-header">
<button ng-click="PrevRow()">Previous button </button>
<button href="" ng-click="NextRow()">Next button </button>
</div>
<div>
<table>
<tbody>
<tr ng-repeat="row in rows">
<td class="anchor" ng-style="selectedIndex == $index && 'background-color':'lightblue'">row</td>
</tr>
</tbody>
</table>
</div>
</body>【讨论】：
我也有类似的问题，只是我项目中的可滚动元素是 div，而不是窗口。该表位于 div 内。当我使用上面的代码（用 $('#myDiv') 替换 $(window) 时，它不能 100% 工作。在我将选定的行在表中移动得越来越低后，选定的行设法滚动到视图之外。以上是关于当所选行是最后一行之前的行时自动滚动表格的主要内容，如果未能解决你的问题，请参考以下文章
当用户使用 UITableView 的后退按钮滚动到最后选定的行时
C# DataGridView 数据显示到最后一行后，如何使滚动条继续向下滚动。