vis.js时间轴自动滚动功能

Question

我遇到了一个小问题，我无法解决这个问题，希望大家给予一些指导。

我有一个包含大量组和子组的时间线，现在时间线的高度大于显示它的显示器的高度。

这很好，它可以使用鼠标上的滚轮滚动，但是因为它只是挂在墙上的屏幕上的时间轴，所以如果我可以制作自动滚动功能会很酷，滚动在给定的时间范围内向上和向下的时间线。

不幸的是，我不知道在哪里实施它才能让它发挥作用。

我有以下代码来制作 div 滚动（并在 vis.js 代码中尝试了不同的方法来实现它，但到目前为止运气不好）

如果有人知道在给定时间范围内上下滚动的方法，我将非常感谢您的帮助。

<script language="javascript">
ScrollRate = 1;

function scrollDiv_init() {
    //this can be a class also. 
    DivElmnt = document.getElementById('MyDivName');
    ReachedMaxScroll = false;

    DivElmnt.scrollTop = 0;
    PreviousScrollTop  = 0;

    ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}

function scrollDiv() {

    if (!ReachedMaxScroll) {
        DivElmnt.scrollTop = PreviousScrollTop;
        PreviousScrollTop++;

        ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);
    }
    else {
        ReachedMaxScroll = (DivElmnt.scrollTop == 0) ? false : true;

        DivElmnt.scrollTop = PreviousScrollTop;
        PreviousScrollTop--;
    }
}

function pauseDiv() {
    clearInterval(ScrollInterval);
}

function resumeDiv() {
    PreviousScrollTop = DivElmnt.scrollTop;
    ScrollInterval    = setInterval('scrollDiv()', ScrollRate);
}
</script>

Answer 1

好吧，关于在 http://visjs.org/examples/timeline/other/verticalScroll.html 处滚动时间轴，我能看到的唯一棘手的部分是您必须滚动 特定元素 ，而不是时间轴的容器。如果您使用检查器查找带有滚动条的元素，您可能会惊讶地看到：

确实，如果我对该元素应用滚动

 var scrollerElement = document.querySelector('#mytimeline1 div.vis-panel.vis-left.vis-vertical-scroll');
 scrollerElement.scrollTop = 100;

时间轴垂直滚动。顺便说一句，vis-vertical-scroll class 表明我们走对了路。实际上，您可能应该改用更短的选择器：

 var scrollerElement = document.querySelector('#mytimeline1 .vis-vertical-scroll');

您可以通过该页面上的浏览器控制台尝试此操作。我认为这应该足以让您实现所需的自动滚动。

vis.js时间轴自动滚动功能

vis.js timeline auto scroll function

scroll

autoscroll

vis.js

vis.js-timeline