我在这里建立了一个网站http://sycoscientistrecords.github.io。我使用以下代码来确定各种div的位置：
myscroll = {};
function getScrollpos(idname) {
return document.getElementById(idname).offsetTop;
}
myscroll.point = [];
myscroll.idnames = [];
myscroll.point[0] = getScrollpos("home");
myscroll.point[1] = getScrollpos("artists");
myscroll.point[2] = getScrollpos("songs");
myscroll.point[3] = getScrollpos("beats");
myscroll.point[4] = getScrollpos("contact");
问题是getScrollpos("beats");会返回2766，但myscroll.point[3]会返回3124。同样getScrollpos("contact")返回3668但myscroll.point[4]返回4046。另一方面，myscroll.point[0]和getScrollpos("home")都返回相同的值。 myscroll.point[1] and getScrollpos("artists")也会返回相同的值。即使我从源文件中删除所有其他javascript代码，问题仍然存在。
问题：为什么在我的代码中将58添加到第三和第四个数组元素？
P.S：虽然您可以直接在开发工具中打开我的网站代码。我使用相同的javascript代码创建了一个基本架构，以使用以下代码模拟问题：
var myscroll = {};
myscroll.list = document.getElementsByClassName("navbar-right")[0].getElementsByTagName("li");
myscroll.bodypos = function getScrollY() {
scrOfY = 0;
if (typeof(window.pageYOffset) == 'number') {
//Netscape compliant
scrOfY = window.pageYOffset;
} else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
//DOM compliant
scrOfY = document.body.scrollTop;
} else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
}
return scrOfY;
}
function getScrollpos(idname) {
return document.getElementById(idname).offsetTop;
}
myscroll.point = [];
myscroll.point[0] = getScrollpos("home");
myscroll.point[1] = getScrollpos("artists");
myscroll.point[2] = getScrollpos("songs");
myscroll.point[3] = getScrollpos("beats");
myscroll.point[4] = getScrollpos("contact");
function removeclass() {
for (var i = 0; i < 5; i++) {
myscroll.list[i].className = "";
}
}
window.addEventListener('scroll', function(e) {
if (myscroll.bodypos() >= myscroll.point[0]) {
removeclass();
myscroll.list[0].className = "active";
}
if (myscroll.bodypos() >= myscroll.point[1]) {
removeclass();
myscroll.list[1].className = "active";
}
if (myscroll.bodypos() >= myscroll.point[2]) {
removeclass();
myscroll.list[2].className = "active";
}
if (myscroll.bodypos() >= myscroll.point[3]) {
removeclass();
myscroll.list[3].className = "active";
}
if (myscroll.bodypos() >= myscroll.point[4]) {
removeclass();
myscroll.list[4].className = "active";
}
});
for (var j = 0; j < 5; j++) {
(function(j) {
myscroll.list[j].anchor = document.getElementsByClassName("navbar-right")[0].getElementsByTagName("li")[j].getElementsByTagName("a")[0];
myscroll.list[j].anchor.addEventListener("click", function(event) {
event.preventDefault();
if ((document.body.scrollTop != undefined) && (document.body.scrollTop < myscroll.point[j])) {
var clr1 = setInterval(function() {
if (document.body.scrollTop < myscroll.point[j] - 10) {
document.body.scrollTop += 3;
} else {
document.body.scrollTop = myscroll.point[j];
clearInterval(clr1);
}
}, 1);
}
if ((document.documentElement.scrollTop != undefined) && (document.documentElement.scrollTop < myscroll.point[j])) {
var clr2 = setInterval(function() {
if (document.documentElement.scrollTop < myscroll.point[j] - 10) {
document.documentElement.scrollTop += 3;
} else {
document.documentElement.scrollTop = myscroll.point[j];
clearInterval(clr2);
}
}, 1);
}
if ((document.body.scrollTop != undefined) && (document.body.scrollTop > myscroll.point[j])) {
var clr3 = setInterval(function() {
if (document.body.scrollTop >= myscroll.point[j] + 4) {
document.body.scrollTop -= 3;
} else {
document.body.scrollTop = myscroll.point[j];
clearInterval(clr3);
}
}, 1);
}
if ((document.documentElement.scrollTop != undefined) && (document.documentElement.scrollTop > myscroll.point[j])) {
var clr4 = setInterval(function() {
if (document.documentElement.scrollTop >= myscroll.point[j] + 4) {
document.documentElement.scrollTop -= 3;
} else {
document.documentElement.scrollTop = myscroll.point[j];
clearInterval(clr4);
}
}, 1);
}
alert(j);
}, true);
}(j));
}#navbar,
#navbar a:link,
#navbar a:visited,
#navbar a:hover {
position: fixed;
color: red !important;
}
#home {
width: 500px;
height: 500px;
background-color: black;
display: block;
}
#artists {
width: 500px;
height: 500px;
background-color: gray;
display: block;
}
#songs {
width: 500px;
height: 500px;
background-color: yellow;
display: block;
}
#beats {
width: 500px;
height: 500px;
background-color: blue;
display: block;
}
#contact {
width: 500px;
height: 500px;
background-color: green;
display: block;
}<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#artists">Artists</a>
</li>
<li><a href="#songs">Songs</a>
</li>
<li><a href="#beats">Beats</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
<div id="home"></div>
<div id="artists"></div>
<div id="songs"></div>
<div id="beats"></div>
<div id="contact"></div>
答案 0 :(得分：0)
我在Google Chrome上做了一些研究。访问您的网站后，我打开了开发人员控制台（F12）并执行了您的代码。结果如下：
myscroll = {};
function getScrollpos(idname) {
return document.getElementById(idname).offsetTop;
}
myscroll.point = [];
myscroll.idnames = [];
myscroll.point[0] = getScrollpos("home");
myscroll.point[1] = getScrollpos("artists");
myscroll.point[2] = getScrollpos("songs");
myscroll.point[3] = getScrollpos("beats");
myscroll.point[4] = getScrollpos("contact");
getScrollpos("home");
// 0
getScrollpos("songs");
// 1202
getScrollpos("beats");
// 2017
getScrollpos("contact");
// 2857
myscroll.point
// [0, 420, 1202, 2017, 2857]
看起来一切正常。
答案 1 :(得分：0)
由于它“测量”的方式，
的结果getScrollpos("beats");
根据您在调用此功能时显示开发者控制台的不同，可能会发生变化，是否可能与测试方式有所不同？
尝试一下，根据您设置开发控制台的高度，该函数将返回不同的值。