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

Scroll multiplier doesn't work with float numbers and looks laggy #381

Closed
Kendzi-x opened this issue Aug 16, 2023 · 5 comments
Closed

Scroll multiplier doesn't work with float numbers and looks laggy #381

Kendzi-x opened this issue Aug 16, 2023 · 5 comments
Labels
🔧 Enhancement New feature or request

Comments

@Kendzi-x
Copy link

Describe the bug
Scrolling config doesn't work with float numbers and looks laggy with a mouse wheel or trackpad (even with multiplier: 1 it's not smooth).

Code
For example we can check: https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/examples/complex-1/index.js with this scroll config:

scroll: {
  vertical: { precise: true, multiplier: 0.5 },
  horizontal: { precise: true, multiplier: 0.5 }
},

Scrolling works smoothly with the scrollbars (grabbing them and move) , but laggy with a mouse wheel or trackpad.

gantt-schedule-timeline-calendar version
3.33.16

@Kendzi-x
Copy link
Author

under "laggy" I mean that when you scroll with a mouse wheel or trackpad, the scroll always jump to the next/previous row

@neuronetio
Copy link
Owner

So we need to implement a different scrolling mechanism. We will most likely add some setting that will change the default scroll behavior and will work based on pixels and not rows. We will try to implement it as soon as possible and will leave info here when we are done.

@neuronetio
Copy link
Owner

New functionality has been added in version 3.34.0.
To use it, you need to set the byPixels: true option for each scroll configuration.

const config = {
/* ... */
scroll: {
      horizontal: {
        multiplier: 0.3,
        precise: true,
        byPixels: true,
      },
      vertical: {
        multiplier: 0.3,
        precise: true,
        byPixels: true,
      },
    },
/* ... */
};

But there is a little catch. If you use api.setScrollLeft or api.setScrollTop anywhere in your code, you must pass an absolute offset (not rowId or dataIndex as in normal mode) as an argument.
So when byPixels is set to false - nothing changes, but when set to true then setScrollLeft and setScrollTop work in offset mode (in pixels).

Example setScrollLeft with byPixels enabled:

const configScroll = this.state.get('config.scroll.horizontal');
const scrollLeft = this.api.getScrollLeft();
if (configScroll.byPixels) {
  this.api.setScrollLeft(scrollLeft.absolutePosPx + 1); // offset + 1 pixel
} else {
  this.api.setScrollLeft(scrollLeft.dataIndex + 1); // offset + one date
}

@JohannesPichlerSTRABAG
Copy link

@neuronetio , thank you very much for your quick reaction!

@Kendzi-x
Copy link
Author

Works like a charm, thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔧 Enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants