Improvements

• Improvements for running in deno and bun.
• Initialization as the body element is now detected as such when the tag name of the target element is "body". Previously this detection was done with target === target.ownerDocument.body which would not work when creating a new body element in memory.
• If a non generated elements.viewport element is provided during initialization its scroll position will be taken as the initial scroll position instead of the scroll position of the target element.
• When interacting with the scrollbars itself the scrollbars.autoHideDelay will now apply when the scrollbars would be auto hidden when the interaction ends.

Changelogs:

You can read further details in the corresponding changelogs.

• overlayscrollbars
• overlayscrollbars-react
• overlayscrollbars-vue
• overlayscrollbars-ngx
• overlayscrollbars-svelte
• overlayscrollbars-solid

Improvements

• Add focusin and focusout to the focus and blur event management when wrapping and unwrapping elements. #605
• The scrollbars.visibility option was unintuitive to use for adjusting visibility per axis. Its now only applied if the scrollbars scroll axis is able to have a scrollable overflow. #611

Changelogs:

You can read further details in the corresponding changelogs.

• overlayscrollbars
• overlayscrollbars-react
• overlayscrollbars-vue
• overlayscrollbars-ngx
• overlayscrollbars-svelte
• overlayscrollbars-solid

Breaking Changes

• Although not a major release, I've decided to drop IE11 support in this version. This change should be beneficial to the majority of users.
  • The size of the js bundle decreased by ~6%.
  • The size of the css bundle decreased by ~18%.
  • The fields flexboxGlue and cssCustomProperties are removed from the Environment. (returning object from OverlayScrollbars.env())

Improvements

• Streamlining of scroll related calculations, including RTL direction.
• Focus and Blur event management when wrapping and unwrapping elements during initialization and destroy. #605

Changelogs:

You can read further details in the corresponding changelogs.

• overlayscrollbars
• overlayscrollbars-react
• overlayscrollbars-vue
• overlayscrollbars-ngx
• overlayscrollbars-svelte
• overlayscrollbars-solid

Features

• Finalize and document the plugin system which makes it possible to create "static" and / or "instance" plugins.
• The static OverlayScrollbars.plugin function returns a "static" plugins instance(s) for the registered plugins.
• A new instance.plugin function which returns a "instance" plugins instance.
• window resize events will now update instances only if it is needed and only what is needed.

Improvements

• Small internal rewrite to improve stability, performance and bundle size.
• Improvements the documentation and README.

Changelogs:

You can read further details in the corresponding changelogs.

• overlayscrollbars
• overlayscrollbars-react
• overlayscrollbars-vue
• overlayscrollbars-ngx
• overlayscrollbars-svelte
• overlayscrollbars-solid

Features

• Make use of the new ScrollTimeline API in supported browsers.
• Add the option scrollbars.autoHideSuspend to make it possible to suspend the autoHide functionality until the first scroll interaction was performed. The default value for this option is false for backwards compatibility reasons but is recommended to be true for better accessibility.
• Add a CSS selector to bridge deferred initializations visually.

Bug Fixes

• Fix a bug where a change wasn't detected properly when the target element was hidden initially. #546
• Fixed a bug where the scroll offset was reset to 0 sometimes after initialization when the target was the body element.

Improvements

• Expanded all examples and created a new Examples page with all available examples for all frameworks. #544

Changelogs:

You can read further details in the corresponding changelogs.

• overlayscrollbars
• overlayscrollbars-react
• overlayscrollbars-vue
• overlayscrollbars-ngx
• overlayscrollbars-svelte
• overlayscrollbars-solid

Improvements

• Force the scroll-behavior css property to be auto when the user interacts with a scrollbar to prevent smooth scrolling to apply where it shouldn't. #515
• The viewort, padding and content elements don't use the class attribute anymore for their styling. Instead each of them uses its own data-overlayscrollbars-* attribute. This has been done so that 3rd party libraries aren't conflicting with classnames from overlayscrollbars or vice versa. Selectors like .os-viewport, .os-padding or .os-content won't work anymore. #526 #530

Changelogs:

You can read further details in the corresponding changelogs.

• overlayscrollbars
• overlayscrollbars-react
• overlayscrollbars-vue
• overlayscrollbars-ngx
• overlayscrollbars-svelte
• overlayscrollbars-solid

Bug Fixes

• Fix a bug where initial RTL direction wasn't detected properly.

Features

• Introduce CSS Custom Properties to improve theming and styling of scrollbars. (#478)

Improvements

• Improve pointer event handling on scrollbar handle and track.
• Improve the README documentation with a styling section.

Changelogs:

You can read further details in the corresponding changelogs.

• overlayscrollbars
• overlayscrollbars-react
• overlayscrollbars-vue
• overlayscrollbars-ngx
• overlayscrollbars-svelte
• overlayscrollbars-solid

Read the details about this release in the corresponding changelogs:

• overlayscrollbars v2.0.0
• overlayscrollbars-react v0.4.0
• overlayscrollbars-vue v0.4.0
• overlayscrollbars-ngx v0.4.0
• overlayscrollbars-svelte v0.4.0
• overlayscrollbars-solid v0.4.0

Improvements:

• #452 change appear animation detection from z-index to cursor.
• #447 only call image callback when the plugin isn't destroyed.

Improvements:

• #434 Fixed onInitializationWithdrawn callback
• #377 Fixed HTMLImageElement Memory Leak

React:

• Added React 18 support

Vue:

• Added Vue3 support