我回来了。
如果视口顶部有固定分区，则Chrome滚动太多。
我创建了一个页面，可以让您显示浏览器的滚动方式，如果您有Chrome浏览器，则可以看到Chrome的效果如何。
演示在http://thetesting.site/fixednav/scrolling.html
有关于如何使用该页面以及如何在页面上重现Chrome问题的说明。
我因为没有提供页面代码而受到指责 - 这就是全部 - 我没有希望获得帮助的HTML和CSS的特定部分。你必须查看整个页面。
我不知道该代码片段是否可以运行 - 以前从未发布过代码段。只需转到该页面即可使用它。
function resize() {
// Get the height of the fixed-header. parseInt used to strip off the px in the value
fixedHeight = parseInt(document.getElementById("topfixed").offsetHeight, 10);
// Set the height of the fixed, scrolling, instructions division to the viewport height minus the
// height of the fixed-header and 20px "slop space"
document.getElementById('instructions').style.height = (parseInt(window.innerHeight, 10)
- fixedHeight - 20) + "px";
}
gblLastButtonClicked = 0; // Yes, I'm using a global variable - did so because this is down and dirty.
function buttonclick(button) {
// Set the height of the fixed-header from the value of the button just clicked. Values are 0px,
// 10px, 20px....80px
document.getElementById("topfixed").style.height = button.value;
// Display the height in the button bar
document.getElementById("heighttext").innerHTML = "Height is " + button.value + " ";
// Set the body margin-top to the height of the fixed-header (as gotten from value of the clicked button)
document.getElementById("body").style.marginTop = button.value;
// Set the top of the Instructions division to the height of the fixed-header (from button.value)
document.getElementById("instructions").style.marginTop = button.value;
// Set the top of the buttonbar division to the height of the fixed-header (from button.value)
document.getElementById("buttonBar").style.marginTop = button.value;
// Set the previously clicked button's text to blank
document.getElementById("button" + gblLastButtonClicked).style.color = "black";
// Set the previously clicked button's font-weight to normal
document.getElementById("button" + gblLastButtonClicked).style.fontWeight = "normal";
// Set the last button clicked global variable.
gblLastButtonClicked = parseInt(button.value, 10);
// Set the text color of the button just clicked to red
button.style.color = "red";
// Set the font-weight of the button just clicked to bod
button.style.fontWeight = "bold";
// Call the resize function (defined above) to resize the fixed instuctions division
resize();
// Set the focus to the body of the page. It will be on the button just clicked and setting it to the
// body allows the use of the pagedown key without clicking on a part of the body - I've seen
// some browsers which keep the focus on the button and, as a result, pagedown does not scrol the page
document.getElementById("content").focus();
// Scroll the page to the top. We do this so the testing always starts at the same point and to save
// the user from having to do so.
window.scrollTo(0, 0);
}
function fillPage() { // this function writes 150 lines of text into the body
for (i = 1; i < 151; i++) {
document.writeln("********************** Line #" + i + "<BR>");
}
} .button {
width: 50px;
font-size: 12px;
}
.instructions {
position: fixed ;
z-index: 10;
width: 40%;
overflow: auto;
font-size: 15px;
height:500px;
left: 57%;
background-color: lightblue;
color: black;
padding: 5px;
border: 2px black solid;
top: 0px;
}
.topfixed {
background-color: yellow;
opacity: .8;
z-index: 1;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 0px;
color: red;
font-weight: bold;
}
.buttonBar {
position: fixed;
left: 0px;
padding-bottom: 10px;
background-color: green;
width: 100px;
text-align: center;
z-index: 10;
top: 0px;
}
.content {
width: 80%;
margin: 25px auto;
margin-top: 0px;
}function resize() {
// Get the height of the fixed-header. parseInt used to strip off the px in the value
fixedHeight = parseInt(document.getElementById("topfixed").offsetHeight, 10);
// Set the height of the fixed, scrolling, instructions division to the viewport height minus the
// height of the fixed-header and 20px "slop space"
document.getElementById('instructions').style.height = (parseInt(window.innerHeight, 10)
- fixedHeight - 20) + "px";
}
gblLastButtonClicked = 0; // Yes, I'm using a global variable - did so because this is down and dirty.
function buttonclick(button) {
// Set the height of the fixed-header from the value of the button just clicked. Values are 0px,
// 10px, 20px....80px
document.getElementById("topfixed").style.height = button.value;
// Display the height in the button bar
document.getElementById("heighttext").innerHTML = "Height is " + button.value + " ";
// Set the body margin-top to the height of the fixed-header (as gotten from value of the clicked button)
document.getElementById("body").style.marginTop = button.value;
// Set the top of the Instructions division to the height of the fixed-header (from button.value)
document.getElementById("instructions").style.marginTop = button.value;
// Set the top of the buttonbar division to the height of the fixed-header (from button.value)
document.getElementById("buttonBar").style.marginTop = button.value;
// Set the previously clicked button's text to blank
document.getElementById("button" + gblLastButtonClicked).style.color = "black";
// Set the previously clicked button's font-weight to normal
document.getElementById("button" + gblLastButtonClicked).style.fontWeight = "normal";
// Set the last button clicked global variable.
gblLastButtonClicked = parseInt(button.value, 10);
// Set the text color of the button just clicked to red
button.style.color = "red";
// Set the font-weight of the button just clicked to bod
button.style.fontWeight = "bold";
// Call the resize function (defined above) to resize the fixed instuctions division
resize();
// Set the focus to the body of the page. It will be on the button just clicked and setting it to the
// body allows the use of the pagedown key without clicking on a part of the body - I've seen
// some browsers which keep the focus on the button and, as a result, pagedown does not scrol the page
document.getElementById("content").focus();
// Scroll the page to the top. We do this so the testing always starts at the same point and to save
// the user from having to do so.
window.scrollTo(0, 0);
}
function fillPage() { // this function writes 150 lines of text into the body
for (i = 1; i < 151; i++) {
document.writeln("********************** Line #" + i + "<BR>");
}
}
好吧，看看它，看看你的想法
我只测试了Chrome和Firefox。如果您安装了其他浏览器，请尝试使用该页面并告诉我结果。
页面上有完整的说明。
编辑 - 这是演示页面的page with screen captures
编辑 - 我创建了一个版本的演示页面，其中包含适用于Chrome的解决方案 - 对于Chrome我解除了固定标头的修复。我无法发布另一个链接 - 我限制为两个 - 但是在原始演示页面上有一个指向已修改页面的链接。
编辑 - 自我发布页面的网址以来已经过了7个小时，屏幕截图显示了它的工作方式以及我希望它如何工作以及我发布问题后的23个小时。
我应该假设这让每个人都难过吗？
有没有人尝试使用Firefox和Chrome以外的浏览器？如果是这样，结果是什么 - 您尝试使用哪种浏览器并使其像Firefox或Chrome一样工作？
我想打开一个错误报告，我想先了解一下，如果Chrome的屏幕分辨率高于1024 x 600，那么它的行为方式是否相同。
有没有人在Chrome浏览器的分辨率高于1024 x 600的屏幕上试过这个？如果是这样，结果如何？对于分辨率较高且与1024 x 600相同的Chrome，它的工作方式是否相同？或者它的工作方式不同？
我应该一次一步地发布一步一步来测试吗？我是否应该使用不同的高度按钮逐步拼出Chrome和Firefox？
编辑 - 最后一个。好的 - 我假设没有人有任何想法让它与Chrome一起工作，或者没有人想要阅读这个问题 - 大多数＆＃34;观点＆＃34;我可能会检查是否有活动。
我已将此报告为Chrome错误，并将等待查看结果。有没有人真的去过演示页面并使用IE或Chrome或Firefox以外的其他浏览器进行试用？
我认为这个让每个人都难过。甚至可以通过尝试使用不同浏览器屏幕分辨率的人来听到....
答案 0 :(得分：2)
我正在关闭这个 - 我的“答案”是有一个问题需要解决。我已经向Chrome的用户提交了一份错误报告，我正在整理更多文档，以帮助他们评估问题。
由于没有人花时间测试这个并回到我身边，我仍然没有确定问题的严重程度。但是，我有人在更高分辨率的屏幕上试一试，他们得到的结果和我一样。
正如我所说，我正在使用屏幕分辨率相对较低的待机系统，问题可能与该系统特有的某些组合有关 - 但是，我再也没有任何详细的反馈从他们所做的任何测试的结果来看。
简单地说，问题在于，如果视口顶部有固定的分区，则根据固定分区的高度，Chrome会滚动下一个“页面”下面的一行或多行当你“向下翻页”时固定的分割当你执行相反的操作时：向上翻页“除了线条滚动”关闭“视口的底部。我称之为”丢失线条。“
一个人说，固定的部门过度使用并不重要 - 简而言之 - 你不应该这样做，这不是一个真正的错误。他们说这是你可以“修复”代码的东西;这没什么大不了的，有点像鸡肉和鸡蛋的东西 - 我不太理解它。
这些评论更多的是捍卫问题，而不是讨论或分享测试结果。
我在雅虎网页上遇到过这个错误，虽然没有一个人是完美的 - 甚至我自己 - 雅虎在网页设计和功能方面有良好的声誉，然而，他们正在使用固定的部门 - 他们是否在评论错误在他们的页面固定分裂？他们在犯罪吗？
如果想到一个固定的部门会占用宝贵的屏幕空间，那么考虑到新屏幕的物理尺寸和分辨率，这几乎不是一个考虑因素。当然，你可以完成它，但有时候，如果不是很多次，你想在视口的顶部保持控件可用。
我已经看到了一种趋势，不是远离固定的划分，而是走向它们，尤其是与页面一起滚动的固定部门 - 一段时间。它们不会到达顶部并得到“修复”，直到您向下滚动到分区中的信息将滚动到视口顶部的位置。
许多页面现在都这样做，人们想要复制它。我在StackOverFlow上看到了很多关于如何“浮动条形图然后在需要时修复它”的问题。
我第一次遇到这样的酒吧时，我想 - 哦，那很可爱，但除了表示“嘿，看看我能做什么？”之外还有什么意义呢？
与任何工具或设施一样，您可以过度使用固定分区或使用它们。是否发生的是将计算专业人员与“未洗过的群众分开。： - ）
只是为了惹人注意 - 记住框架？它们如何被认为是天生的邪恶？他们不是邪恶的，他们只是有几个导致问题的问题。最引用的一个是，当你为“页面”添加书签时，你确实得到了框架集的书签，而不是内容。有一种非常简单的方法可以解决这个问题 - 非常简单 - 并且不需要阻止任何人使用框架。
您选择了您认为最适合工作的工具，如果它有局限性，您可以解决它们，也可以使用其他工具。
最后一件事，我会把它关闭。
我正在与一个非技术人员讨论计算机，我正在寻找一种方法来解释计算机编程远远超出FAR - 不仅仅是学习编程语言而且我想出了我想到的最好的类比到目前为止。
你有三个人。一个是西班牙语，一个是俄语，一个是美国人，他们都是三种流利的母语。这些人中的每一个都渴望成为一名作家。
精通一门语言并不意味着你知道怎么写。写作，良好的写作，远不止能够将单词组合在一起来制作语法正确的句子。写作是一门必须学习并不断完善的艺术。
因此，它需要哪种计算机编程和所有辅助过程。