WheelScrolling plugin
This plugin enables custom mouse wheel scrolling on elements.
The usual mouse wheel scrolling behaviour of web browsers is to scroll the closest scrollable element in the direction of the wheel rotation. That means, if the user wants to scroll downwards while the mouse cursor is over a scrollable element (like a selectable or tree) and the page itself also has a scrollbar, then the element is scrolled as long as it is not already scrolled to its end. Otherwise, the page is scrolled instead. Once a scroll operation has started, its target is locked until an idle timeout expires or the mouse cursor was moved a bit. That means, once the smaller element is scrolling, further scrolling will always go to that element, even if it cannot scroll any further in the direction. This allows to scroll an element to its end by generously spinning the wheel without also starting to scroll a parent element or the page afterwards.
The main problem here is often that the page is scrolled if the hovered element cannot scroll any further in the indicated direction. Think of such a scrollable list or tree in a fixed side panel, like a configuration view. When the user wants to scroll that, maybe only to see if there is more content to be revealed, they might inadvertently scroll the entire page instead.
To prevent that situation, this wheel scrolling plugin can be used by calling the wheelScrolling() plugin method on an element.
It intercepts the wheel event and implements its own scrolling for any element, without falling back to scrolling parent elements or the page.
This guarantees that turning the mouse wheel over an element will never scroll any parent or the page.
Additionally, the scroll steps and speed can be configured. This is especially useful for smaller views that are only a few lines tall. The usual scroll speed would often shift the view by more than half of its height, which leads to the loss of orientation or prevents accurate positioning to see the desired lines. The smaller the scroll height, the smaller the scroll step should be.
Default example
This example shows the scroll behaviour over a small scrollable element with default settings.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus lectus nec mi gravida, sed vulputate lorem scelerisque. Vestibulum dictum bibendum nisi eget molestie. Maecenas aliquam laoreet vulputate. Proin magna purus, viverra eget lorem vitae, semper tincidunt mauris. Duis accumsan elit imperdiet sapien lacinia ullamcorper. Aliquam eget consequat risus, euismod euismod ex. Fusce et vestibulum enim. Morbi mauris massa, ullamcorper mattis viverra vel, consectetur a lectus. Sed tincidunt orci convallis neque iaculis sodales in et odio. Integer egestas pulvinar laoreet. Nullam sodales elit non urna congue consequat. Duis tempor quis velit ut volutpat. Aliquam fringilla sem a efficitur molestie. Aenean a dui pellentesque, aliquam justo eu, blandit augue. Donec sit amet imperdiet neque.
Custom example
This example shows custom scroll step and speed settings.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus lectus nec mi gravida, sed vulputate lorem scelerisque. Vestibulum dictum bibendum nisi eget molestie. Maecenas aliquam laoreet vulputate. Proin magna purus, viverra eget lorem vitae, semper tincidunt mauris. Duis accumsan elit imperdiet sapien lacinia ullamcorper. Aliquam eget consequat risus, euismod euismod ex. Fusce et vestibulum enim. Morbi mauris massa, ullamcorper mattis viverra vel, consectetur a lectus. Sed tincidunt orci convallis neque iaculis sodales in et odio. Integer egestas pulvinar laoreet. Nullam sodales elit non urna congue consequat. Duis tempor quis velit ut volutpat. Aliquam fringilla sem a efficitur molestie. Aenean a dui pellentesque, aliquam justo eu, blandit augue. Donec sit amet imperdiet neque.
Disable scrolling
The disabled option allows to disable any scrolling over a specific element.
The element itself should not be scrollable.
Turning the mouse wheel over such an element will never scroll the page.
Try as you might, turning the mouse wheel over this paragraph of text will not scroll the page. Apply this to a fixed-position side panel that may contain scrollable elements on its own, but shall never leak scrolling to the rest of the page.
Options
The following options are available:
| Name | Type | Description | Default |
|---|---|---|---|
disabled |
Boolean | Specifies whether wheel scrolling is disabled completely. | false |
duration |
Number | The duration of a single scroll event animation, in milliseconds. | 150 |
step |
Number | The scroll offset of a single wheel delta event. Values between 0 (exclusive) and 1 (inclusive) are treated as the ratio of the element’s visible height. Values greater than 1 are absolute pixel offsets. | 0.1 |
Plugin methods
This plugin provides methods to control the scroll behaviour.
deinit
deinit()→ this (Frontfire)
Deinitializes the plugin and removes the event handlers from the elements.