我在自动刷新时将窗口水平滚动到正确位置时遇到问题。
我所拥有的是一小时一小时的作业时间表，使用不同的机器。作业设置为在某个时间点在计算机上运行。我在下面张贴了一张图片，以帮助您理解。
每台机器都是无序列表，其中li的位置向左浮动。每个不代表工作的li代表一个小时的时间。机器是垂直排列的，而时间是水平排列的。页面顶部的紫色ul是带有日期和时间的时间线，我给它指定了ID“时间”。在#time下，每个li都给了它们各自的值作为ID。因此代表1/16/16 7:00:00的li的ID为'1/16/16 7:00:00'。
跨越屏幕高度的红线表示当前时间。我给了这个ID“指标”。
此屏幕发布在我们工厂车间的电视上，以供人们查看，我在html中使用以下代码以一定速率刷新了屏幕：
<meta http-equiv="refresh" content="120"/>
我将解释页面加载时会发生什么，然后发布前端代码。
页面加载后，它将页面位置重置为0,0。由于前一个窗口位置，我在滚动到错误位置时遇到问题，因此添加了此功能。我获取了当前日期和时间，并使用它来查找ID为当前日期和小时的#time li的偏移量。一旦获得该offSet值，就将指标线的左侧位置设置为offSet.left值。然后，我进行计算以说明分钟。这会将指示器线设置到适当的位置。
我将#time ul的位置设置为固定，因此在电视屏幕垂直滚动以显示所有机器时，它始终可见。因为它是固定位置，所以我需要适当地设置#time ul的左侧位置，否则，当我水平滚动屏幕时它将无法正确对齐。我总是会看到#time ul的最左侧。
下一部分是我遇到问题的地方。
我仍然将offSet位置存储在用于设置指标线位置的变量中。我使用相同的值来设置水平滚动屏幕的距离。然后我减去约500个像素，这样我们可以看到后面几小时的路程。
当我从地址栏按Enter键时，所有位置均已正确设置。但是每次屏幕刷新时，它只会滚动到从地址栏中刷新时的位置。尽管指示器线的位置设置正确，所以随着一天的进行，红线缓慢向右移动，并且由于我们一天24小时不间断运行，因此第二天早晨它就不在屏幕上了。这需要我每天两次将键盘连接到计算机，然后从地址栏中手动刷新它。
我本来以为，由于红线的位置和屏幕的位置都在同一个变量之外，因此如果红线在起作用，则水平滚动也应如此。
我已经在下面发布了我的代码。原谅任何草率的编码，这是我第一次尝试Javascript和JQuery之一。我尝试发表很好的评论，因此很有意义。我希望我已经清楚地解释了所有内容，并感谢您的帮助。
<script>
$(document).ready(function () {
window.scroll(0, 0);
//Set the left position of #time correctly for horizontal scrolling
var wrapperWidth = $("#wrapper").css("width");
$("#time").css("width", wrapperWidth);
$(window).scroll(function () {
$('#time').css({
'left': parseInt($(this).scrollLeft() * -1)
});
});
//function and loop for scrolling vertically
function scroll(speed) {
$('html, body').animate({ scrollTop: $(document).height() - $(window).height() }, speed, function () {
$(this).animate({ scrollTop: 0 }, speed);
});
}
var speed = 19000
scroll(speed)
setInterval(function () { scroll(speed) }, (speed * 2) + 5000);
//Set the #time ul width to the #wrapper width to get the correct offSet positions
var wrapper = $("#wrapper");
$("#time").css("width", wrapper.css("width"));
//span #indicator the height of the document
$("#indicator").height($(document).height());
//Get the current date and parse it
var d = new Date();
var pos = ("0" + (d.getMonth() + 1)).slice(-2) + "/" + ("0" + d.getDate()).slice(-
2) + "/" + d.getFullYear().toString().substr(2, 2) + " " + d.getHours() +
":00:00";
//find the li of the current date and time
var li = $("[id='" + pos.toString() + "']");
//if found
if (li.length > 0) {
//get the li's position
var offset = li.offset();
//set the red line position and add minutes
$("#indicator").css("left", (offset.left + (d.getMinutes() / 60) * 50));
//Add hover functionality to show the current time
$("#indicator").mouseover(function () {
var now = new Date().toLocaleString();
$("#indicator").attr("title", now)
});
$("#indicator").mouseleave(function () {
$("#indicator").removeAttr("title")
});
//Scroll the screen horizontally to the position of the #time li, minus x pixels
window.scroll(offset.left - 500, 0);
//If #time li not found, don't show red line or scroll the screen
} else {
$("#indicator").css("display", "none");
}
});
</script>
最佳答案
我认为问题在于这段代码。
<meta http-equiv="refresh" content="120"/>
“刷新”标签将页面刷新为“刷新前视图”，从而覆盖了滚动窗口时使用的自定义JavaScript。
尝试注释掉该部分，然后将其插入Javascript的底部。
// update every 120 seconds
setTimeout(function(){
window.location.url(<URL_TO_YOUR_SITE>);
}, 120000)