2

我有一个包含一长串表格的大型 HTML 页面。每张桌子大约和屏幕一样大，但大小略有不同。我想让用户使用键盘上的PgUp和PgDn键来快速浏览表格。每次按下这些键中的任何一个，都会向上或向下移动一张桌子，并将桌子的顶部准确地放在屏幕的顶部。

这可能吗？

Pg**我认为可能有一个我还没有听说过的 HTML 元素表示分页符，因此如果按下其中一个键，浏览器将准确跳转到那里，但我没有找到。

这可能使用一些 Javascript 功能吗？我考虑为按键安装一个事件监听器并自己解决所有问题，但这会相当麻烦，因为我的页面包含很多display:none（即不可见的）元素，当然应该跳过它们。

实现这一目标的正确方法是什么？

4

1 回答 1

4

你应该给你的表一个 ID，比如#table1 #table2 #table3. 您现在可以通过将它们的 ID 粘贴到您的 URL 后面来导航到这些表。让我们用 javascript 实现它：

var currTable = 1;

document.addEventListener('keydown', function(event) {
 if(event.keyCode == 33) {
     // PageUp was pressed
     if (currTable - 1 > 0) {
       currTable--;
       window.location.hash = "#table" + currTable;
     }
 }
 else if(event.keyCode == 34) {
     // PageDown was pressed
     currTable++;
     window.location.hash = "#table" + currTable;
 }
});

这是基本的例子。如果您愿意，您可以检查具有该特定 ID 的表是否存在

我考虑为按键安装一个事件侦听器并自己解决所有问题，但这会很麻烦，因为我的页面包含很多显示元素：无（即不可见），当然应该跳过它们。

检查您尝试访问的元素是否显示为无。如果有，检查下一个元素，然后像这样继续。

于 2017-09-19T11:17:22.857 回答