0

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

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

因为它没有从滚动长度中移除标题的高度（以及它下面的一小部分填充）。因此（例如），如果您在页面的开头并点击“向下翻页”，您必须手动向上滚动一点以匹配您之前离开的位置并且不会错过任何内容。

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

滚动控制：

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

我的包含实际内容的页面尚未托管。一个朋友托管了一个我用通用内容制作的“虚拟”页面，但代码与我的其他一些页面相同（我还没有准备好公开内容）。这是链接：

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

提前致谢...

(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;
}());
4

2 回答 2

0

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

document.getElementById('header')

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

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

至

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

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

var content, header

如果不是这种情况，则创建您自己的 jsfiddle 以显示您的确切代码。

于 2013-07-04T07:46:58.667 回答
0

您需要做的是为列表中的每个项目添加一个类标签（让我们将其命名为 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

于 2013-07-04T07:37:46.407 回答