Custom scrollbar wrapper: projects content and overlays a scrollbar track over it (created by its KbqScrollbarViewport host directive).
@Component({ selector: 'kbq-scrollbar', exportAs: 'kbqScrollbar' }) class KbqScrollbar { readonly mode = input<KbqScrollbarMode>(this.options.mode, { alias: 'kbqScrollbarMode' }); readonly hideDelay = input<number>(this.options.hideDelay, { alias: 'kbqScrollbarHideDelay' }); readonly scrollChanges: Observable<Event>; getNativeElement(): HTMLElement; scrollTo(options: KbqScrollbarScrollToOptions): void; scrollToTop(behavior?: ScrollBehavior): void; scrollToBottom(behavior?: ScrollBehavior): void; scrollStart(behavior?: ScrollBehavior): void; scrollEnd(behavior?: ScrollBehavior): void; scrollToElement( target: HTMLElement | string, options?: KbqScrollbarScrollToElementOptions ): void; scrollIntoView( target: HTMLElement, behavior?: ScrollBehavior ): void; flashScrollIndicators(): void; }
kbqScrollbarModeKbqScrollbarMode Visibility mode for the scrollbar. Defaults to the app-wide KBQ_SCROLLBAR_OPTIONS.
kbqScrollbarHideDelaynumber How long the scroll-revealed hover-mode track stays visible after scrolling stops, in milliseconds.
Defaults to the app-wide KBQ_SCROLLBAR_OPTIONS.
scrollChangesObservable<Event> Emits on every native scroll event of the viewport. Emits outside Angular's zone — see CdkScrollable.elementScrolled.
getNativeElement()HTMLElement The scrollbar's native scrollable element.
scrollTo()void Scrolls to the specified offsets. RTL-normalized — see CdkScrollable.scrollTo.
scrollToTop()void Scrolls to the start of the vertical axis.
scrollToBottom()void Scrolls to the end of the vertical axis.
scrollStart()void Scrolls to the logical start of the horizontal axis — the right edge in RTL, left in LTR.
scrollEnd()void Scrolls to the logical end of the horizontal axis — the left edge in RTL, right in LTR.
scrollToElement()void Scrolls target (an element, or a selector resolved against this scrollbar) into view.
scrollIntoView()void Scrolls target to the center of the viewport.
flashScrollIndicators()void Briefly reveals the scrollbar track — see KbqScrollbarViewport.flashScrollIndicators.
Customizes the browser-rendered scrollbar of its host without replacing native scrolling.
@Directive({ selector: '[kbqNativeScrollbar]', exportAs: 'kbqNativeScrollbar' }) class KbqNativeScrollbar { readonly descendants = input<boolean>(this.options.descendants, { alias: 'kbqNativeScrollbarDescendants' }); }
kbqNativeScrollbarDescendantsboolean Whether browser-rendered scrollbars of descendant elements should also be customized.
Defaults to KBQ_NATIVE_SCROLLBAR_OPTIONS.
Marks its host element as the custom scrollbar's scroll target, hiding its native scrollbar whenever a custom scrollbar track replaces it.
@Directive({ selector: '[kbqScrollbarViewport]' }) class KbqScrollbarViewport { readonly mode = input<KbqScrollbarMode>(this.options.mode, { alias: 'kbqScrollbarMode' }); readonly hideDelay = input<number>(this.options.hideDelay, { alias: 'kbqScrollbarHideDelay' }); readonly flashes: Observable<void>; readonly scrollChanges: Observable<Event>; flashScrollIndicators(): void; scrollTo(options: KbqScrollbarScrollToOptions): void; scrollToTop(behavior?: ScrollBehavior): void; scrollToBottom(behavior?: ScrollBehavior): void; scrollStart(behavior?: ScrollBehavior): void; scrollEnd(behavior?: ScrollBehavior): void; scrollToElement( target: HTMLElement | string, options?: KbqScrollbarScrollToElementOptions ): void; scrollIntoView( target: HTMLElement, behavior?: ScrollBehavior ): void; getNativeElement(): HTMLElement; }
kbqScrollbarModeKbqScrollbarMode Visibility mode for this viewport's scrollbar. Defaults to the app-wide KBQ_SCROLLBAR_OPTIONS.
kbqScrollbarHideDelaynumber How long the scroll-revealed hover-mode track stays visible after scrolling stops, in milliseconds.
Defaults to the app-wide KBQ_SCROLLBAR_OPTIONS.
flashesObservable<void> Emits when flashScrollIndicators is called.
scrollChangesObservable<Event> Emits on every native scroll event of the viewport. Emits outside Angular's zone — see CdkScrollable.elementScrolled.
flashScrollIndicators()void Briefly reveals an overflowing hover-mode scrollbar.
scrollTo()void Scrolls to the specified offsets. RTL-normalized — see CdkScrollable.scrollTo.
scrollToTop()void Scrolls to the start of the vertical axis.
scrollToBottom()void Scrolls to the end of the vertical axis.
scrollStart()void Scrolls to the logical start of the horizontal axis — the right edge in RTL, left in LTR.
scrollEnd()void Scrolls to the logical end of the horizontal axis — the left edge in RTL, right in LTR.
scrollToElement()void Scrolls target (an element, or a selector resolved against this viewport) into view.
scrollIntoView()void Scrolls target to the center of the viewport.
getNativeElement()HTMLElement The viewport's native scrollable element — the host this directive is applied to.
Overrides the default native scrollbar options within the given injector scope.
function kbqNativeScrollbarOptionsProvider( options: Partial<KbqNativeScrollbarOptions> ): Provider;
Overrides the default scrollbar options within the given injector scope.
function kbqScrollbarOptionsProvider( options: Partial<KbqScrollbarOptions> ): Provider;
Configuration for KbqNativeScrollbar.
type KbqNativeScrollbarOptions = { descendants: boolean; };
descendantsboolean Whether browser-rendered scrollbars of descendant elements should also be customized.
How the scrollbar is presented:
hover — track appears on pointer hover or while scrolling (default);always — track is always visible while the content overflows;native — the browser's native scrollbar is used;hidden — no scrollbar is shown, but the content stays scrollable.hover and always draw a bar only for an axis the user can scroll: one whose computed overflow is
hidden, clip or visible gets none, however far its content overflows.
type KbqScrollbarMode = 'always' | 'hidden' | 'hover' | 'native';Configuration for KbqScrollbar.
type KbqScrollbarOptions = { mode: KbqScrollbarMode; hideDelay: number; };
hideDelaynumber How long the scroll-revealed track stays visible after scrolling stops, in milliseconds.
Options accepted by KbqScrollbarViewport.scrollToElement/KbqScrollbar.scrollToElement.
type KbqScrollbarScrollToElementOptions = { top?: number; left?: number; behavior?: ScrollBehavior; };
topnumber Extra gap to leave above the target, in px — e.g. so it doesn't end up under a sticky header.
leftnumber Extra gap to leave to the left of the target, in px.
Options accepted by KbqScrollbarViewport.scrollTo/KbqScrollbar.scrollTo — RTL-normalized, see CdkScrollable.scrollTo.
type KbqScrollbarScrollToOptions = ExtendedScrollToOptions;Injection token holding the current KbqNativeScrollbarOptions.
const KBQ_NATIVE_SCROLLBAR_OPTIONS: InjectionToken<KbqNativeScrollbarOptions>;Injection token holding the current KbqScrollbarOptions.
const KBQ_SCROLLBAR_OPTIONS: InjectionToken<KbqScrollbarOptions>;