个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
如果您在页面顶部有一个绝对定位(位置:固定)的栏，就像许多网站那样，它会破坏 Page Down 按钮(以及 Page Up)的行为。 Page Down 不是在屏幕顶部留下一行左右的文本，而这些文本以前位于屏幕底部，以便于继续阅读，而是有一点点截断非常烦人。 Here is a contrived example of this.有没有办法解决这个问题(除了避免页面顶部的固定位置栏)？
上面链接示例的源代码在下面为后代重复:
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
#bar {
background: #f00;
height: 200px;
position: fixed;
top: 0;
width: 100%;
}
p {
margin-top: 250px;
}
</style>
</head>
<body>
<div id="bar">IMPORTANT STUFF GOES HERE</div>
<p>When you press Page Down (and then Page Up the other way), some of the list items are cut off below the red bar.</p>
<ol><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li></ol>
</body>
</html>
我找到了 someone else already asking this question ，但似乎他得到的唯一答案是有人误解了这个问题。希望我的问题(包括示例)更清楚，并且有人可以帮助我。
最佳答案
您必须检查 Page Down/Up 键 onkeydown(或 onkeyup)，如果您的页面需要用户键入(可能会产生大量开销)，这就不太好了。也就是说，您可以尝试以下操作。我没有测试过这么多，所以我不知道它有多健壮。关键是要跟踪滚动位置并根据“bar”div 的 offsetHeight 进行调整。这是代码:
<!doctype html>
<html>
<title></title>
<head>
<style type="text/css">
html, body {
height:100%;
}
body {
margin:0;
padding:0;
}
#bar {
background: #f00;
height: 200px;
position: fixed;
top: 0;
width: 100%;
}
p {
margin-top: 250px;
}
li {
margin:2em 0;
}
#divScroll {
overflow:auto;
height:100%;
width:100%;
}
</style>
<script language="javascript">
function adjustScroll(event) {
var ds = document.getElementById('divScroll');
var b = document.getElementById('bar')
var e = event || window.event;
var key = e.which || e.keyCode;
if(key === 33) { // Page up
var remainingSpace = ds.scrollHeight - ds.scrollTop;
setTimeout(function() {
ds.scrollTop = (remainingSpace >= ds.scrollHeight - b.offsetHeight) ? 0 : (ds.scrollTop + b.offsetHeight);
}, 10);
}
if(key === 34) { // Page down
var remainingSpace = ds.scrollHeight - ds.scrollTop - ds.offsetHeight;
setTimeout(function() {
ds.scrollTop = (remainingSpace <= b.offsetHeight) ? ds.scrollHeight : (ds.scrollTop - b.offsetHeight);
}, 10);
}
}
document.onkeydown = adjustScroll;
</script>
</head>
<body>
<div id="bar">IMPORTANT STUFF GOES HERE</div>
<div id="divScroll">
<p>When you press Page Down (and then Page Up the other way), some of the list items are cut off below the red bar.</p>
<ol>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
</ol>
</div>
</body>
</html>
关于html - 页面顶部固定位置栏的向下翻页键可用性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6393508/
25
4
0
我在尝试弄清楚如何做到这一点时遇到了问题 - 我想进行翻页，并且事件页面将保持在分页的中心。 您知道任何示例或如何使其发挥作用吗？ .active { background: red }
我需要创建翻书/翻页应用程序。我见过 flash 创建的翻页，可以用任何其他语言完成吗？ jquery 还是 javascript？另外，我需要记住哪些概念/知识来制作翻页书？ 谢谢。 最佳答案 不太
我找到了一些例子。但是，所有示例都使用 PdfReader。我想使用 PDFWriter。 下面是我写的代码。 private void CreatePdf(string strPdfPath) {
我希望之前有人偶然发现了以下问题。 我的 Java 应用程序在 Mac 上有图形性能问题，所以我做了一个简单的测试应用程序(代码如下)。当我在 Windows 上运行它时，控制台告诉我: Graphi
我正在实现一个应用程序，我需要在其中翻转/翻页浏览量？我怎样才能做到这一点？我没有找到解决方案。我在谷歌搜索了很多？谁能帮我解决这个问题？ 最佳答案 我能想到的三种可能性。 您可以使用 cocos2d
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
我正在开发图书阅读器应用程序，我想在其中使用 UISlider 翻页 我在 viewdidload 中尝试了以下代码: pageSlider =[[UISlider alloc]initWit
我想像 Flipboard 应用一样“弯曲” View 。我成功地翻转了整个 View ，但没有弯曲它。我的策略是:从我想弯曲的 View 的一半制作一个 View /图层，将其添加到 View 并翻
前言 在csdn发的第一篇文章，时隔两年，终于实现了爬微博的自由！本文可以解决微博预登录、识别“展开全文”并爬取完整数据、翻页设置等问题。由于刚接触爬虫，有部分术语可能用的不正确，请大家多指正！
我的服务器上的一切都可以通过 ssh 使用 putty 完美运行。然而，在腻子上，甚至直接在服务器键盘上，我无法使用shift + page up 向上翻页/滚动。它向上移动大约半页，然后自动返回到闪
这个问题在这里已经有了答案: 关闭9年前。 Possible Duplicate: Implement page curl on android? 如何在android中做翻页/翻页或 curl 动画
我正在开发一个需要使用 flash 开发翻页( curl )效果的项目，如下例所示: http://www.actionscript.org/showMovie.php?id=459 我发现了很多示例
我有一个很大的 primeng 表: 大量条目导致表格超过 100 页。但是，分页按钮的宽度是固定的，只有两个数字的字体大小会减小。对于三位数，它看起来像这样: 是否可以覆盖一些 css 属性来增加
在 iOS 中，您可以在 UIPageViewController 上使用 PageCurl 过渡样式来获得与 iOS 中的 iBooks 相同的页面 curl 效果。 有没有办法在 React Na
我开发了一个库(我将很快在 BSD/MIT 许可下发布)来模拟 Apple iBooks 中可重排 EPUB3 电子书的媒体覆盖支持(也称为“大声朗读”或“SMIL”)。 (我提醒您，iBooks 仅
我是一名优秀的程序员,十分优秀！