Horizontal Scrollbar For Visjs Timeline

Is it possible to bind a horizontal scrollbar to timeline? I need to implement a horizontal scrollbar for visjs timeline. When the time line is dragged the scrollbar should update

Solution 1:

Currently, there is no way to directly add a horizontal scrollbar. Best you can do is to add a sibling (element A) with same width of your vis.js timeline element, below it, which contains a 0px tall (height) child element (element B) that has a dynamic width that is inversely proportional to the zoom-out level, and bind an event listener to its parent (element A) scroll event, so that when the scroll event happens, vis.js "moves" to another location. Likewise you have to bind an event listener when the zoom event happens in vis.js so this new visible timerange can be used to calculate how big shall be element B and match its orizontal position so the scrollbar-thumb size is always centered on the same point (if possible).