Timeline: Do not scroll to bottom if vertical scrollbar is shown

[dominic-simplan]

Hi, it seems that if vertical scrolling is enabled for the timebar and the scrollbar is displayed, it always scrolls down to the last group after entries have been added: http://jsfiddle.net/tcL554mj/4/

Is there a way to keep showing the top content instead of scrolling down automatically or could this be implemented?

[yotamberk]

What do you mean by:

it always scrolls down to the last group after entries have been added

Your example is static. Does it jump to the bottom when dynamically adding an item? Can you modify your example to show the problem?

[dominic-simplan]

Sorry, my explanation was probably not good. If you open th example, the last five rows are shown (the timeline is scrolled down to the bottom automatically):

I would like that the first x rows are shown initially, i.e. the scrollbar is at the top:

How can I do this?

[tatsujb]

it seems obvious to me that you would want to show the first element first rather than the last... (as is the case right now). The option should at least be there for the user to configure.

I tried this :

setTimeout(()=>{
      this._element.nativeElement.querySelector('.vis-content').scrollTop = 0;
},2000);

in the ngAfterViewInit() where the timeline is declared. and variations on this where I selected '.vis-panel .vis-left' instead or simply did this.container.scrollTop = 0; none of which worked.

It won't be clean in js and jquerry anyhow, it needs to be timeline-native.

[tatsujb]

this hack does bring it to top :

options = {
     onInitialDrawComplete: () => {
         setTimeout(()=>{
             const contents = this._element.nativeElement.querySelectorAll('.vis-content');
             for (let i = contents.length - 1; i >= 0; i--) {
                contents[i].style = 'top: 0;';
             }
         },3000);
    }
}

but not any of the items and as soon as you click the timeline anywhere it goes back to the bottom.

[tatsujb]

as a matter of fact, this problem ties back into #3903 because if there was the possibility to simply separate all three types of both scrolls.

Say horizontally scrolling, future and past, would be as it currently is : scroll wheel with no modifier key, zoom in and out would be the key that you set in zoomKey option, I have 'ctrlKey', so control, and then for vertical scroll you'd be able to set a key as well, for example verticalScrollKey and you could set it to 'altKey' or 'shiftKey'.

and therefore there would never be any confusion for timelinejs which action to execute upon scroll, it would have to have been specified what modifier key does what and what no modifier key scroll does.

My understanding is that to implement this functionality would pass through creating a method for receiving and treating x-scroll which means you could call this method (were it to be made available but I suspect that's just a matter of it being public) and set the x-scroll to 0 in the options upon onInitialDrawComplete.

[tatsujb]

Sorry for spam :

I noticed another part of this unwanted behavior that I hadn't noticed before.

If you have groups/subgroups with staked items (same or closeby start date) their row becomes taller to accommodate these stacked items.

And if you then scroll x (scroll horizontally), either with the scroll wheel or by click-n-dragging the timeline, you'll see that the timeline forces its way downwards on you when you come back upon the stacked lines.

in other words, if you move the timeline to where there are no items, and all rows are their minimum height and then move back to where all the items + stack items were you will find yourself at the bottom of the timeline with the topmost items out of the visible field once again, just like when you first load the page and you need to scroll back up again.

[Selassie35]

We have the same issue in here.

verticalScroll: true,
maxHeight : '100%',

makes the vertical scrollbar starts at the end

To correct it, I needed to implement onInitialDrawComplete and call _setScrollTop(0) on the timeline

[tatsujb]

@Selassie35 hey thanks

I didn't know about the timeline._setScrollTop(0) that's pretty cool!

but in anycase as soon as you set verticalScroll: true, you loose both scrollWheel to scrub functionality and Ctrl+scrollWheel (or whatever key you set) to zoom functionality.

that's two functionalities for the price of one. it's a net loss.

the goal would be to have scrub + zoom + a scrollbar that you can have and click even if it is unbound to the scroll wheel even with any modifier keys.

(idealy, though you could control all three types of scroll wheel action where two of the types of actions would happen when a modifier key is held down)

[tatsujb]

with some help, I discovered that this issue is caused by orientation's value being anything other than "top".

here in the fiddle it's

orientation: {
  axis: "top"
}

which gives this issue as well.

same if you set the value to "bottom" or "both".

so as a result :

you can't have the timeline's labels anywhere other then top or you get scrolled to the bottom.

also I believe this explains parts of https://github.com/almende/vis/issues/3903 further testing required.

credit to https://github.com/OutOfNutella for finding this info.