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

时间:2018-07-05 12:58:46

标签: scroll vis.js autoscroll vis.js-timeline

我遇到了一个小问题,我无法缝扎起来,我希望你们的一些指导。

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

这很好,可以使用鼠标上的滚轮进行滚动,但是由于它只是壁挂式屏幕上的时间轴,因此如果我可以设置自动滚动功能,则可以滚动时间轴在给定的时间范围内上下移动。

不幸的是,我不知道要在哪里实现它才能起作用。

我有以下代码来制作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>

1 个答案:

答案 0 :(得分:0)

好吧,关于http://visjs.org/examples/timeline/other/verticalScroll.html上滚动时间轴的唯一棘手的部分是,您必须滚动某些元素,而不是时间轴的容器。如果使用检查器通过滚动条查找元素,您可能会惊讶地看到以下内容:

enter image description here

确实,如果我将滚动应用于该元素

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

时间轴垂直滚动。顺便说一下,vis-vertical-scroll类表明我们走了正确的路。实际上,您可能应该使用较短的选择器代替:

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

您可以通过该页面上的浏览器控制台进行尝试。我认为这足以使您实现所需的自动滚动。