Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to apply both horizontal scroll and vertical scroll at a time in vistimeline #1670

Open
SudheerGangaraju opened this issue Aug 10, 2023 · 3 comments

Comments

@SudheerGangaraju
Copy link

Hi Team ,

I have a use case to implement both horizontal scroll and vertical scroll in a timeline.
Please suggest how we can achieve by changing config options or any other way.

i tried all the options which were mentioned in this vistimeline/issues space, but unable to get proper solution.

Currently i am trying with below options:

{
horizontalScroll: true,
verticalScroll: true,
stack: true,
min: moment(startDate).format(“YYYY-MM-DD”)
max: moment(endDate).format(“YYYY-MM-DD”)
orientation: top,
zoomKey: “ctrlKey”
}

Thanks in Advance 🥳
Regards
Sudheer

@MLS535
Copy link

MLS535 commented Nov 27, 2023

If you want the orientation in both, you should use orientation: both or by default do not put anything. If you want to remove the orientation and change it, I think you can manage to do it with setOptions.

@jamesbarker185
Copy link

Hm likewise, Im trying to set the following behaviour
Mouse
Scroll up/down = Scroll vertically
Shift + Scroll up/down = Scroll horizontally
Control + Scroll up/down = Zoom in/out

but im not able to achieve both horizontal and vertical scroll :/

LukasWillin added a commit to LukasWillin/vis-timeline that referenced this issue Jan 9, 2025
…1323) and 'horizontalScrollInvert' (visjs#1595) to allow for both vertical and horizontal scrolling & invert the horizontal scroll direction.

Fix eslint errors
modified:   docs/timeline/index.html                        | Add documentation for options 'horizontalScrollKey' and 'horizontalScrollInvert'.
modified:   examples/timeline/other/horizontalScroll.html   | Add new options 'horizontalScrollKey' and 'horizontalScrollInvert' to horizontal scroll example.
modified:   lib/timeline/Core.js                            | Implement new options to allow for both vertical and horizontal scrolling & invert the horizontal scroll direction.
modified:   lib/timeline/optionsTimeline.js                 | Add options 'horizontalScrollKey' and 'horizontalScrollInvert'.
modified:   rollup.config.js                                | lint
modified:   types/index.d.ts                                | Add type definitions for options 'horizontalScrollKey' and 'horizontalScrollInvert'.
LukasWillin added a commit to LukasWillin/vis-timeline that referenced this issue Jan 10, 2025
…1323) and 'horizontalScrollInvert' (visjs#1595) to allow for both vertical and horizontal scrolling & invert the horizontal scroll direction.

Fix eslint errors
modified:   docs/timeline/index.html                        | Add documentation for options 'horizontalScrollKey' and 'horizontalScrollInvert'.
modified:   examples/timeline/other/horizontalScroll.html   | Add new options 'horizontalScrollKey' and 'horizontalScrollInvert' to horizontal scroll example.
modified:   lib/timeline/Core.js                            | Implement new options to allow for both vertical and horizontal scrolling & invert the horizontal scroll direction.
modified:   lib/timeline/optionsTimeline.js                 | Add options 'horizontalScrollKey' and 'horizontalScrollInvert'.
modified:   rollup.config.js                                | lint
modified:   types/index.d.ts                                | Add type definitions for options 'horizontalScrollKey' and 'horizontalScrollInvert'.
@LukasWillin
Copy link

Hm likewise, Im trying to set the following behaviour Mouse Scroll up/down = Scroll vertically Shift + Scroll up/down = Scroll horizontally Control + Scroll up/down = Zoom in/out

but im not able to achieve both horizontal and vertical scroll :/

You may check out my PR for the time being and see whether that is what you are looking for. I had the exact same thought, so I took matters into my own hands. Enjoy.
PR 1852

LukasWillin added a commit to LukasWillin/vis-timeline that referenced this issue Jan 10, 2025
…, visjs#1323) and 'horizontalScrollInvert' (visjs#1595) to allow for both vertical and horizontal scrolling & invert the horizontal scroll direction.

Feature Changes
modified:   docs/timeline/index.html                        | Add documentation for options 'horizontalScrollKey' and 'horizontalScrollInvert'.
modified:   examples/timeline/other/horizontalScroll.html   | Add new options 'horizontalScrollKey' and 'horizontalScrollInvert' to horizontal scroll example.
modified:   lib/timeline/Core.js                            | Implement new options to allow for both vertical and horizontal scrolling & invert the horizontal scroll direction.
modified:   lib/timeline/optionsTimeline.js                 | Add options 'horizontalScrollKey' and 'horizontalScrollInvert'.
modified:   rollup.config.js                                | lint
modified:   types/index.d.ts                                | Add type definitions for options 'horizontalScrollKey' and 'horizontalScrollInvert'.

Lint Changes
- Fix eslint errors such as missing doc comments or faulty syntax where necessary.
- Fix eslint error no-prototype-builtins
- Fix eslint-disable-line comments being on the wrong line to suppress the stated rule.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants