I want the timeline to be scrollable by default. How can I accomplish this?

Gantt
#1

https://snippet.dhtmlx.com/tq7gb6b0

As you can see from the snippet, the start/end is determined automatically by the library, and the library has determined that there is no reason to scroll.

However, I want to have infinite scroll so the user can move forward/backward in the timeline area even if their tasks fit into the bounds.

The onGanttScroll event does not fire in this case. I want the user to always be able to scroll in the timeline, even if there are no tasks. How can I accomplish this?

#2

Hello,
Please take a look at the following article: How-tos Gantt Docs where you can see how to implement infinite scroll. You will also find a ready-made example there.

#3

Hi. Yes I understand, but onGanttScroll event does not fire in my snippet.

That is required for infinite scroll to work. In my snippet scrolling does not trigger the alert. Thank you

#4

Hereā€™s an updated snippet showing a modification of my actual code -

It seems like I have to add my own boundaries (please comment out the ā€œonParseā€ event code to see the issue).

https://snippet.dhtmlx.com/wo3oikoc

In addition, I notice that in the recommend infinite scroll code from your documentation, because the ā€œonGanttScrollā€ is called so many times it blows out the scales and its easy to end up with scale that is like 100000+ pixels wide which kills performance, understandably.

I tried to make a window, and Iā€™m wondering if you have any suggestions for making the interaction more fluid. I have to set a reasonable delay like 200ms, otherwise it is either too jarring or too slow.

Thank you

#5

Hello,

but onGanttScroll event does not fire in my snippet.

I tried scrolling in your example, and onGanttScroll seems to work as expected. Please check the video:
https://files.dhtmlx.com/30d/e0bbd9342763facccdc3114c824fb625/2024-10-02_15-09-00.mp4

please comment out the ā€œonParseā€ event code to see the issue

If I comment out the onParse handler in your example, then allowInfiniteScroll is set to false, which causes onGanttScroll to exit early due to this condition:

gantt.attachEvent("onGanttScroll", () => {
    if (!allowInfiniteScroll) return;

In addition, I notice that in the recommend infinite scroll code from your documentation, because the ā€œonGanttScrollā€ is called so many times it blows out the scales and its easy to end up with scale that is like 100000+ pixels wide which kills performance, understandably.

I tried to make a window, and Iā€™m wondering if you have any suggestions for making the interaction more fluid. I have to set a reasonable delay like 200ms, otherwise it is either too jarring or too slow.

After reviewing your code, I understand that youā€™ve already taken the main steps to improve performance. Unfortunately, at this point, there is no way to make the infinite scrolling smoother.

1 Like