Ngx Scrollbar Versions Save

What's Changed

• fix: cdkVirtualScrollViewport got dependency of @angular/material/select, closes in #573.
• fix: cdkVirtualScrollViewport horizontal scrollbar not showing when orientation is vertical, closes in #571
• fix: ScrollToElement function wrong scroll position, closes in #574
• fix: Remove height and width attributes from the scrollbar SVG icons.

Breaking changes

• Remove ngx-scrollbar/utils package and split its directives into 2 sub-packages ngx-scrollbar/cdk and ngx-scrollbar/mat to avoid wrong dependency.

What's Changed

• fix: Scrollbar buttons - arrow icons are not being displayed in Safari mobile.

What's Changed

• feat: Support complex markup with scrollToElement function, closes #268.
• feat: Add provideSmoothScrollOptions function to ease overriding the default smooth scroll options.
• refactor: Enhance and simplify smooth scroll manager.
• refactor: Enhance track drag code and functionality.
• refactor: Simplify and reuse code in thumb drag code.
• refactor: Reuse code in scrollbar button component.
• regret: Use offsetWidth and offsetHeight again instead of getBoundingClientRect due to incorrect value when scrollbar is used in an overlay such as matSelect.
• fix: (reachedEnd) does not work without subscribing to (reachedBottom).

Breaking changes:

• Remove NgScrollbarReachModule.
• Rename the directive MatSelectViewport to NgScrollbarMatSelectViewport.

What's Changed

• feat: Add scrollbar buttons using buttons options, closes #465.
• refactor: Reuse similar code in track, thumb and buttons directives.
• refactor: content wrapper selector should be direct child of the viewport.
• refactor: Use swithcMap instead of expand for track long ongoing pointer down event.
• refactor: Only use getRtlScrollAxisType once on initialization in SmoothScrollManager.
• refactor: matSelectViewport use instant scroll function to scroll to the selected item in the list.
• refactor: Use getBoundingClientRect in all directives instead of clientWidth and clientHeight for high precision calculation.

Full Changelog: https://github.com/MurhafSousli/ngx-scrollbar/compare/v14.0.0-beta.5...v14.0.0-beta.6

What's Changed

• fix: Should not initialize the scrollbar if externalSpacer selector was set but was not found.
• refactor: Unify properties in track and thumb directives.
• refactor: When asyncDecetion="true" reset viewport adapter properties if viewport / content wrapper elements are removed.
• enhance: Add missing unit tests,

• feat: Added support for dynamically initializing scrollbars for content rendered async (3rd party libraries) using asyncDetection="auto".
• fix: Wrong mobile attribute setter (was using SAFARI flag instead of IOS).
• enhance: Use MutationObserver instead of ngAfterViewChecked to detect content in asyncDetection directive.
• refactor: Improve error handling when selectors was not found in <ng-scrollbar externalViewport> component.
• refactor: Remove the default value for track transition.
• refactor: Add additional CSS variables to customize the fade effect when visibility="hover":
  • --scrollbar-hover-opacity-transition-enter-duration.
  • --scrollbar-hover-opacity-transition-leave-duration.
  • --scrollbar-hover-opacity-transition-leave-delay.
• refactor: The following CSS variables were removed:
  • --scrollbar-hover-transition-duration.
  • --scrollbar-hover-transition-delay.

Breaking changes

• Rename the option clickScrollDuration to trackScrollDuration.

• fix: In RTL, horizontal scrollbar track click does not work properly, closes #548.
• fix: PrimeNg integration, native scrollbar still appears in Safari browsers.
• refactor: Enable scrollbar interactions on mobile devices.

• feat: Add a provider function provideScrollbarOptions to override of the default options.
• feat: Add a provider function provideScrollbarPolyfill to override the default scroll timeline polyfill link.
• feat: Add asyncDetection directive to help integration with 3rd-party libraries.

Breaking changes

• Rename ScrollbarAppearance default value from standard to native.
• Rename ScrollbarVisibility value from always to visible.

The core package has been written from scratch ✨

• feat: Significant performance improvement, the scrollbar does not rely on the scroll event anymore. updating scroll thumb position is done via native CSS which means the calculation is done on the browser background worker.
• feat: Auto-height feature is default now, the component behaves like a standard HTML element and will fit its content out of the box.
• feat: Mimic the scroll behavior when the track is clicked.
• feat: Add cdkVirtualScrollViewport directive to the util package.
• feat: Add matSelectViewport directive to the util package, closes #537.
• feat: Add scrollTimelinePolyfill option to change the path of scroll timeline polyfill.
• enhance: Add payload to differentiate update cause, closes #517.
• enhance: Use throttleTime instead of debounceTime in case resize sensor needed to be throttled.
• fix: scrollbar disappearing on Firefox/Safari when reaching bottom/end, closes #529.
• fix: scroll position when the track is clicked

Reached events package has been written from scratch ✨

• feat: Use the IntersectionObserver instead of the scroll event to detect when scroll is reached.
• feat: Add reachedTopOffset reachedBottomOffset reachedStartOffset and reachedEndOffset in addition to reachedOffset input.
• feat: Alternatively, you can accomplish the same using the new CSS variables --reached-offset, --reached-offset-top, --reached-offset-bottom, --reached-offset-start and --reached-offset-end.
• fix: Scrolled Event triggered after Reached Event, closes #521.
• fix: reachedBottom output broke scrollbar layout inside mat-select, closes #531.

Breaking changes

• Options renamed:

  • sensorDisabled has been renamed to disableSensor
  • sensorDebounce has been renamed to sensorThrottleTime
  • pointerEventsDisabled has been renamed to disableInteraction
  • trackClickScrollDuration has been renamed to clickScrollDuration
  • (updated) has been renamed to (afterUpdate)

• Options removed:

  • disabled option has been removed.
  • viewClass option has been removed.
  • minThumbSize option has been removed, use the css variable instead --scrollbar-thumb-min-size.
  • autoWidthDisabled has been removed.
  • autoHeightDisabled option has been removed.
  • autoWidthDisabled option has been removed.
  • scrollAuditTime option has been removed since the scroll event is no longer used.
  • windowResizeDebounce has been removed from the global options.
  • The stream NgScrollbar.scrolled has been removed, Use NgScrollbar.viewport.nativeElement to listen to the scroll event.

• Usage changes:

When viewport directive is used, it requires externalViewport attribute on the component like the following example:

<ng-scrollbar externalViewport>
  <div scrollViewport>
    ...
  </div>
</ng-scrollbar>

Note that an additional content wrapper element is required in order for the scrollbar to work properly.

Additionally, you can select the viewport by providing a selector .my-viewport instead of using scrollViewport directive.

<ng-scrollbar externalViewport=".my-viewport">
  <div class="my-viewport">
    ...
  </div>
</ng-scrollbar>

What's Changed

• fix: scrollViewport directive removes custom CSS classes applied on the viewport element, closes #505 in 8e1f663.

Full Changelog: https://github.com/MurhafSousli/ngx-scrollbar/compare/v13.0.1...v13.0.2