在页面中集成基于Java的页面键滚动控件

Integrating a Java based page key scrolling control in a page

本文关键字：控件 Java 滚动 集成      更新时间：2023-09-26

我创建了一个具有固定标题的网站。我发现这导致了一个问题

  • 当有人按下向下/向上翻页键时，滚动的长度太长

因为它没有从滚动长度中重新调整标题的高度（以及它下面的一小部分填充）。因此（例如），如果你在页面的开头，点击"向下翻页"，你必须手动向上滚动一点，以匹配之前停止的内容，并且不会错过任何内容。

我在这个基于Java的页面中找到了我认为是这个问题的解决方案

滚动控制：

  • https://stackoverflow.com/a/6395433/1858759

  • http://jsfiddle.net/bpMCE/

它在演示页面上运行得很好。然而，无论我做什么（考虑到我在这方面的初学者技能水平），我都无法控制我的页面。我让另一个人看了看并提出了建议，但他们都没有解决问题。他做的一件事是调整"bar"内容与原始Javascript代码的对比。我把这个修改后的代码粘贴在下面，与上面链接的原始代码进行比较。

我的包含实际内容的页面尚未托管。一位朋友托管了一个我制作的"伪"页面，该页面包含通用内容，但代码与我的其他页面相同（我还没有准备好公开内容）。链接如下：

  • http://www.11fifty.com/Site_108/before.html

我完全被这件事难住了。根据需要阅读档案，我发现了一些很好的建议，所以我希望有人能理解这一点。此外，我希望它能帮助其他可能想在自己的固定标题网站中纠正这一点的人。

提前感谢。。。

(function(){
    var content, header
    function adjustScroll(event) {
        var e, key, remainingSpace;

        content = content || document.getElementById('content');
        header  = header  || document.getElementById('header');

        e = event || window.event;
        key = e.which || e.keyCode;

        if ( key === 33 ) { // Page up
            remainingSpace = content.scrollHeight - content.scrollTop;
            setTimeout(function () {
                content.scrollTop = (remainingSpace >= content.scrollHeight - 
header.offsetHeight) ? 0 : (content.scrollTop + header.offsetHeight);
            }, 10);
        }
        if ( key === 34 ) { // Page down
            remainingSpace = content.scrollHeight - content.scrollTop - 
content.offsetHeight;
            setTimeout(function () {
                content.scrollTop = (remainingSpace <= header.offsetHeight) ? 
content.scrollHeight : (content.scrollTop - header.offsetHeight);
            }, 10);
        }
    }

    document.onkeydown = adjustScroll;
}());

您需要做的是向列表中的每个项目添加一个class标记（让我们将其命名为class="new"），并处理按键事件以滚动到下一个项目或上一个项目，此代码可能会帮助您：

function scrollToNew () {
  scrollTop = $(window).scrollTop();
  $('.new').each(function(i, h2){ // loop through article headings
    h2top = $(h2).offset().top; // get article heading top
    if (scrollTop < h2top) { // compare if document is below heading
      $.scrollTo(h2, 800); // scroll to in .8 of a second
      return false; // exit function
    }
  });
}
jQuery(function () {
  $("#next").click(scrollToNew);
  $(document).keydown(function (evt) {
    if (evt.keyCode == 40) { // down arrow
      evt.preventDefault(); // prevents the usual scrolling behaviour
      scrollToNew(); // scroll to the next new heading instead
    } else if (evt.keyCode == 38) { // up arrow
      evt.preventDefault();
      scrollToLast();
    }
  }
});

更多详细信息：https://stackoverflow.com/a/2168876/2310699

在示例页面中，标头的class是header而不是id，因此这不起作用：

document.getElementById('header')

这也适用于content。更改这2行：

<div class="container">
   <div class="header">

至

<div id="container">
   <div id="header">

为什么你在这一行的末尾加一个分号：

var content, header

如果不是这样，那么创建您自己的jsfiddle来显示您的确切代码。

相关文章：