scrollvis.jsautoscrollvis.js-timeline

vis.js timeline auto scroll function


I have gotten into a small issue I can't seem to wrap my head around, and I hope for some guidance from you folks.

I have a timeline with a bunch of groups and subgroups, and the height of the timeline is now bigger than the height of the monitor showing it.

And that is fine it can be scrolled using the scroll wheel on the mouse, however as it is ment to be just a timeline on a wall mounted screen it would be cool if I could make an autoscroll function, that scroll the timeline up and down in a given timeframe.

Unfortunately I can't figure out where to implement it to make it work.

I have the following code to make a div scroll ( and have tried different ways to make it do it in the vis.js code, but so far no luck )

if anyone knows of a way to make it scroll up and down in a given timeframe i would really appreciate the help.

<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>

Solution

  • Well, the only tricky part I can see about scrolling timeline at http://visjs.org/examples/timeline/other/verticalScroll.html is that you have to scroll certain element, not the container of the timeline. If you use inspector to find the element with the scrollbar, you'll probably be surprised to see this:

    enter image description here

    Indeed, if I apply scrolling to that element

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

    the timeline gets scrolled vertically. By the way, the vis-vertical-scroll class suggests that we are on the right way. Actually, you should probably use a shorter selector instead:

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

    You can try this via browser console on that page. I think this should be enough for you to implement the desired autoscrolling.