当视口顶部有固定的分隔线时，Chrome浏览器滚动太多

Question

我回来了。

[当视口顶部有固定的分隔线时，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浏览器中，我不固定固定标题。我不能发布另一个链接-我仅限于两个-但是在原始演示页面上有指向已修改页面的链接。

编辑-自从我发布页面的URL到显示屏幕的工作原理以及我希望它如何工作的屏幕截图已经过去了七个小时，而自发布问题以来已经23个小时了。

我是否应该认为这让每个人都感到难过？

有人用Firefox和Chrome以外的浏览器尝试过吗？如果是这样，结果是什么-您尝试使用哪种浏览器，并且像Firefox或Chrome一样工作？

我想先打开一个错误报告，首先要确定它在屏幕分辨率高于1024 x 600的Chrome中是否具有相同的行为。

有人用Chrome在分辨率高于1024 x 600的屏幕上尝试过此操作吗？如果是这样，结果如何？它与分辨率为1024 x 600的Chrome具有相同的分辨率吗？或者>

我是否应该一步一步地发布脚本进行测试？我应该使用不同的高度按钮逐步说明Chrome和Firefox吗？

编辑-最后一个。

[好吧，我假设没有人有任何想法使其可以在Chrome上运行，或者没有人甚至不想读这个问题-大多数“视图”可能是我检查是否有活动的检查。

我已将其报告为Chrome错误，并将等待其结果。有没有人真的进入演示页面并使用IE或Chrome或Firefox以外的其他浏览器进行了试用？

我假设这个让所有人都感到困惑的人。对于什至听到尝试使用其他屏幕分辨率浏览器的人来说，也是如此。...

我回来了。当视口顶部有固定的分隔线时，Chrome会滚动太多。我创建了一个页面，可让您输入文本浏览器的滚动方式，如果您使用的是Chrome，则可以...

Answer 1

另一答案