Question

我在自动刷新时将窗口水平滚动到正确位置时出现问题。

我所拥有的是一个小时到小时的工作时间表，使用不同的机器。作业设置为在某个时间点在计算机上运行。我已在下面张贴了一张图片，以帮助理解。

每台机器都是无序列表，左边是li。每个不代表工作的li代表一小时的时间。机器垂直排列，时间水平。页面顶部的紫色ul是时间轴，带有日期和时间，我给了ID，＆＃39;时间＆＃39;。在#time下的每个li，我给他们各自的值作为他们的ID。因此，代表1/16/16 7:00:00的li的ID为1/16/16 7：00：00＆＃39;。

横跨屏幕高度的红线表示当前时间。我给了这个ID＆＃39;指示符。

此屏幕发布在我们工厂的电视上供人们查看，我在html中使用了以下代码以一定的速率刷新屏幕：

<meta http-equiv="refresh" content="120"/>

我将解释页面加载时会发生什么，然后我会发布我的前端代码。

页面加载时，会将页面位置重置为0,0。由于之前的窗口位置，我在滚动到错误的位置后发生了这个问题。我获取当前日期和时间，并使用它来查找具有当前日期和小时ID的#time li的offSet。一旦我得到offSet值，我将指标线的左侧位置设置为offSet.left值。然后我做计算来计算分钟数。这会将指标线设置到适当的位置。

我已将#time ul的位置设置为固定，因此当电视屏幕垂直滚动显示所有机器时，它始终可见。因为它是一个固定的位置，我需要适当地设置#time ul的左侧位置，否则，当我水平滚动屏幕时，它将无法正确排列。我总是会看到#time ul最左边的一面。

下一部分是我遇到问题的地方。

我仍然将offSet位置存储在我用来设置指标线位置的变量中。我使用相同的值来设置水平滚动屏幕的距离。然后我减去大约500个像素，这样我们就可以看到几个小时了。

当我从地址栏按回车键时，所有位置都设置正确。但每次屏幕刷新时，它只会滚动到从地址栏刷新时所执行的位置。虽然指示线的位置设置正确，但随着时间的推移，红线慢慢向右移动，因为我们每天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>

Answer 1

我认为问题在于这段代码。

<meta http-equiv="refresh" content="120"/>

'refresh'标记将页面刷新为'view-before-refresh'，覆盖了滚动窗口的自定义javascript。

尝试对该部分进行评论并将其插入到Javascript的底部。

// update every 120 seconds
setTimeout(function(){
    window.location.url(<URL_TO_YOUR_SITE>);
}, 120000)

动态水平滚动位置仅由地址栏刷新设置

1 个答案: