OverlayScrollbars

Features

• The option scrollbars.clickScroll now supports the value 'instant'. The ClickScrollPlugin is not required for it to work. #645

Improvements

• Rewrite clickScroll animation for better performance and to support in and out easing for a smoother animation.

Changelogs:

You can read further details in the corresponding changelogs.

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

Features

• Add the possibility to define a nonce value for websites with a CSP. #646

Improvements

• Reduced bundle size due to removed compatiblity code.
• clickScroll will not cancel on fast clicks / taps. #650
• Add easing to the clickScroll animation.
• The scrollbar-handle offset and size calculations are now entirely in CSS and will not force reflows.
• Use custom css properties for setting the scrollbar-handle offset and size.

Bug Fixes

• Only take the initial scroll coordinates from the viewport element if it has a scrollable overflow. (Otherwise take the initial scroll coordinates from the target element) #652

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 remove the rtlScrollBehavior field from the Environment object. The reason for it is a switch of how the library now detects scroll coordinates for non default flow directions. The replacement for this field is the scrollCoordinates field of the State object for each instance.

Features

• Support non default flow directions (block and inline) not only direction: rtl. #625
• A new field scrollCoordinates in the State object. It indicates the min. and max. scroll coordinates for the viewport. (useful for non default flow direction scrolling)
• A new field scrollCoordinatesChanged in the updateHints object. It indicates whether the scroll coordinates changed in an update.

Improvements

• Fix a Firefox only behavior where releasing a scrollbar handle over an anchor would trigger the anchor and navigate to it.
• Change zoom detection: instead of the window.resize event, the window.matchMedia event is used.
• Greatly improve how dragging and releasing the scrollbar handle behaves for scroll-snapped viewports.

Bug Fixes

• Fix a bug here pointer capture was released too early for wacom pen devices. #630

Changelogs:

You can read further details in the corresponding changelogs.

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

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

Improvements:

• #256 Fixed z-index of .os-padding.
• #263 Fixed passive event-listeners on touch events

Angular:

• #210 updated peerDependency to >=7.0.0 to remove warnings for angular versions higher than 7
• #281 changed OverlayScrollbarsComponent properties from private to public to make it work with angularCompilerOptions.strictInputAccessModifiers

Improvements:

• #251 If you drag the scrollbar handle the click event won't be propagated to the body to be closer to the native behavior.
• #240 The .os-padding element has now default z-index.
• #238 Clickscrolling amount & speed adjusts now to the scrollbar-handle size to be more accurate.
• #226 The RTL(right to left) style won't be applied to the body element anymore to be closer to the native behavior.

Improvements:

• Implemented #197 - max-content is now used to detect the possible size if width is not fixed. (only if supported by the browser else the old algo. is used)
• Updated all wrapper versions to better support frontend frameworks. (#193)
• Removed useless touchevents from the host element (#195)
• GUI Tests

Features:

• A new option called updateOnLoad with which you can control on which elements / selectors OverlayScrollbars shall update automatically after the emit of a load event. Per default the value is set to ["img"] so the plugin will updated after any img emits a load event. You can set it to null to disable this auto updating entierly or add your own selectors to update only on special img elements or on for example loaded iframes. (#183)

Bugfixes:

• Fixed #190 - Removed the browser property inside of all package.json files (revert #166)

Deprecated:

• The cssCalc property inside the object which gets returned from the globals() is now deprecated and will be removed in future versions.

Improvements:

• Changed RTL behavior detection to support the Chromium web interoperability effort #187
• Implemented a way to intuitively set the tabindex attribute of the viewport element #153
• Changed restrictedMeasuring workaround (works via CSS now). Fixes #191
• Removed unnecessary CSS

Bugfixes:

• If ResizeObserver is supported, it now detects changes in padding in Chrome again.

Improvements:

• The cache of the scroll infos which can be get by the scroll method is now updated immediately after you use the scroll method to change the position.
• Fixed #178.

Improvements:

• Fixed a bug where the overflow wasn't calculated properly on the newest firefox in some cases.
• #166 updated package.json in all wrapper components.

Angular:

• Fixed a bug where the usage of a MutationObserver in connection with zone.js freezed the browser. #168

Improvements:

• The host element of a textarea element now applies the focus class if the textarea get focused.
• Improved event handling & management (passive & preventDefault e.g. non-passive events)
• The plugin now recognizes already existing DOM (helpful in component wrappers & PHP / SSR Sites)

React:

• Fixed a bug where elements which were generated through iteration of a list wasn't applied correctly.
• Is using now existing DOM, so React generates the DOM, not the plugin.

Vue:

• Fixed a bug where it wasn't possible to use v-for as direct children.
• Is using now existing DOM, so Vue generates the DOM, not the plugin.

Angular:

• Is using now existing DOM, so Angular generates the DOM, not the plugin.