html - 当视口(viewport)顶部有固定的分隔线时，Chrome滚动太多

Question

我回来了。
当视窗顶部有一个固定的分割时，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
编辑-我已经创建了一个版本的演示页，其中有一个工作的铬-为铬我取消固定的标题。我不能发布另一个链接-我被限制为两个-但有一个链接到原始演示页上的修改页面。
编辑-自从我发布了页面的URL和显示其工作方式和预期工作方式的屏幕截图以来，已经有7个小时了，自从我发布了这个问题以来，已经有23个小时了。
我是否应该假设这让每个人都难堪？
除了Firefox和Chrome，有没有人尝试过其他浏览器？如果是的话，结果是什么——你尝试了什么浏览器，它是否像Firefox或Chrome那样工作？
我想打开一个bug报告，首先我想知道它是否与Chrome在屏幕分辨率高于1024x 600时的表现相同。
有人用Chrome在分辨率高于1024x 600的屏幕上尝试过吗？如果是，结果如何？它的工作原理与Chrome的1024x 600分辨率相同吗？还是有不同的工作原理？
我应该一步一步地发布测试脚本吗？我应该一步一步地为Chrome和Firefox拼出不同的高度按钮吗？
编辑-最后一个。
好吧-我假设要么没有人有任何想法让它与Chrome一起工作，要么甚至没有人想看问题-大多数“视图”可能是我检查的，看是否有活动。
我已经将此报告为一个Chrome错误，并将拭目以待。有没有人真的去了演示页面，用IE或其他浏览器而不是Chrome或Firefox试用过？
我想这件事会让每个人都难堪。甚至有人尝试了一种不同的屏幕分辨率的浏览器，这真是太棒了。。。。

Answer 1

我的“答案”是有一个问题需要解决。我已经向Chrome的人提交了一个bug报告，我正在收集更多的文档来帮助他们评估这个问题。
由于没有人花时间来测试这个问题，并回到我身边，我仍然没有确定事情的严重程度。不过，我有人在分辨率更高的屏幕上试用过，结果和我一样。
正如我所说的，我使用的是一个分辨率相对较低的待机系统，这个问题可能与这个系统的某些特定组合有关——但是，我没有任何人对他们所做的任何测试的结果提供任何详细的反馈。
简单地说，问题是如果视区顶部有一个固定的分割，这取决于固定分割的高度，当你“向下翻页”时，Chrome会在固定分区下面的下一个“页面”上滚动一行或多行，当你“向上翻页”时则会发生相反的情况，除非这些行在视窗底部滚动“离开”。我称之为“输线”
一个人说，这并不重要，固定部门过度使用，简而言之-你不应该这样做，这并不是一个真正的错误。他们说这是你可以用代码“修复”的东西；这没什么大不了的，有点像鸡和蛋的东西-我不太明白。
这些评论更多的是为了捍卫这个问题，而不是讨论它或分享测试结果。
我在雅虎的网页上遇到过这个错误，虽然没有人是完美的——甚至连我自己——雅虎在网页设计和功能上都有很好的声誉，但是，他们使用的是固定分区——他们是不是在评论在他们的网页上使用固定分区的错误？他们有罪吗？
如果认为一个固定的分区占据了宝贵的屏幕空间，那么，考虑到新屏幕的物理尺寸和分辨率，这就很难考虑了。当然，您可以做得太多，但有时，如果不是很多时候，您希望在视口顶部保持控件可用。
我看到了一个趋势，不是从固定的分区，而是朝着它们，特别是固定的分区，随着页面滚动-一段时间。在你向下滚动到分区中的信息将从视窗顶部滚动的点之前，它们不会到达顶部并得到“修复”。
现在很多页面都这样做了，人们想复制它。我在StackOverFlow上看到了很多问题，比如如何在StackOverFlow上“浮动条，然后在需要时修复它”。
第一次遇到这样的酒吧，我就想——哦，那很可爱，但除了显示“嘿，看我能做什么”之外，还有什么意义呢
与任何工具或设施一样，您可以过度使用固定分区或使用不当。无论是否发生，都是将计算机专业人员与“未受教育的大众”区分开来的原因。:-)
只是为了刺激一下-记得镜框吗？他们是如何被认为天生邪恶的？他们不是邪恶的，他们只是有几个问题，造成了问题。最常被引用的一个例子是，当你为一个“页面”添加书签时，你真正得到的是框架集的书签，而不是内容的书签。有一个非常简单的方法来解决这个问题-非常简单-这不需要阻止任何人使用框架。
你选择你认为最适合这份工作的工具，如果它有局限性，你要么绕开它们，要么去寻找一个不同的工具。
最后一件事我会了结的。
我正在和一个非技术人员讨论计算机，我正在寻找一种方法来解释计算机编程不仅仅是学习一门编程语言，我想出了迄今为止我所想到的最好的类比。
你有三个人。一个是西班牙语，一个是俄语，一个是美国人，他们三个都能流利地说他们的母语。这些人都渴望成为一名作家。
流利的语言并不意味着你知道如何写作。写作，好的写作，不仅仅是把单词组合在一起形成语法正确的句子。写作是一门艺术，你必须学习并不断完善。
这就是计算机程序设计和它所包含的所有辅助过程。