pixi-viewport
pixi-viewport copied to clipboard
Limit mouse wheel scroll speed
Is it possible to limit or throttle how fast the scroll wheel scroll is able to move? If I flick my scroll wheel, it scrolls as fast is my mouse emits events. I would like to limit it at a maximum speed, similar to how you can clamp the speed on the mouseEdges plugin.
Here is my current viewport configuration:
const viewport = new Viewport({
interaction: app.renderer.plugins.interaction,
disableOnContextMenu: true,
});
viewport.drag({ mouseButtons: 'right' });
viewport.decelerate({ friction: 0.975 });
viewport.mouseEdges({ distance: 5, speed: 12, decelerate: false });
Did you play with drag.options.wheelScroll and make it < 1? That's the number of pixels to scroll with each mouse spin.
That does help, but it also has the effect of regular scrolling feeling slower/more sluggish. I guess what I am really hoping to achieve is somehow throttling the mouse spin events that are coming in. That way if you scroll slowly you get the current wheelScroll behavior, but if you start sending the events too quickly, some are discarded.
I may be wrong, but wouldn't that give the feeling of basically forcing the user to "scroll slower" without also slowing scroll for normal situations?
Yes, I think I understand what you're asking. What's the user scenario for this? If a user wants to go crazy with spinning their mouse wheel, why slow them down?
Because I am attaching a network event to scrolling. I am building a UI similar to google maps (except the mouse wheel scrolls instead of zooms). As you pan around I download new data, so I wanted to limit the speed you can move at.
TBH not sure how annoying it will feel... was hoping to implement something to see :D
Ah, I understand. I'm not sure it makes sense as an option on the drag plugin, however.
The fastest way to do this is to create a user plugin based on drag() and change the wheel function. In that function you want to track speed (number of turns / second) and if it's greater than a maximum speed setting, then don't perform the scroll. Let me know if you have any questions about implementation.