@talenra/components documentation
  1. Components
  2. ScrollContainerComponent

File

scroll-container/src/scroll-container/scroll-container.component.ts

Description

Applies styling for the browser's default scrollbars. Does not affect scrolling behaviour.

Import

Example :
import { ScrollContainerComponent } from '@talenra/components/scroll-container';

../../../#/content-control/scroll-container

Implements

OnDestroy AfterViewInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
encapsulation ViewEncapsulation.None
host {
}
selector talenra-scroll-container
imports CdkScrollable
styleUrls ../../../../../node_modules/simplebar/dist/simplebar.min.css,
./scroll-container.component.scss
templateUrl ./scroll-container.component.html

Index

Properties
Inputs
Outputs
Accessors

Inputs

scrollYThreshold
Type : number, unknown
Default value : 24, { transform: numberAttribute }

Determines how sensitive updatedScrollYOffset is triggered. Lower values will trigger earlier. E.g. a value of 10 will trigger updatedScrollYOffset if the scroll-container has a scroll-offset of 10px or more.
useOffset
Type : boolean, unknown
Default value : false, { transform: booleanAttribute }

Determines whether the scrollbar has offset (is shorter than the content).
useOverlay
Type : boolean, unknown
Default value : false, { transform: booleanAttribute }

Developer Preview: Determines whether the scrollbar is placed on top of the scrolling content.

Outputs

updatedScrollYOffset
Type : boolean

Triggered whenever the scroll-container's scrollTop property exceedes or undercuts scrollYThreshold value. Use this hook if you need to know whether the scroll-container has scroll-offset. Use scrollYThreshold to adjust the sensitivity.

Properties

Public scrollElement
Type : HTMLElement | null
Default value : null

Reference to the scroll element. This is the HTML element with the relevant scrollTop and scrollLeft properties. It is available after the content is initialized. Use this reference to implement custom scroll behavior.

Example :
import { ScrollContainerComponent } from '@talenra/components/scroll-container';

// ...

@ViewChild(ScrollContainerComponent)
private scrollContainer!: ScrollContainerComponent;

ngAfterViewInit(): void {
 // The element is available once the view is initialized
 const elm: HTMLElement = this.scrollContainer.scrollElement;
 // Read relevant properties
 console.log(elm.scrollWidth, elm.clientWidth, elm.scrollLeft, elm.scrollHeight, elm.clientHeight, elm.scrollTop);
}

Accessors

dimensions
getdimensions()

Returns dimensions of the scroll container.

Returns : ScrollContainerDimensions
scrollTop
setscrollTop(offset: number)

Sets the vertical scroll offset.

Parameters :
Name Type Optional
offset number No
Returns : void
scrollLeft
setscrollLeft(offset: number)

Sets the horizontal scroll offset.

Parameters :
Name Type Optional
offset number No
Returns : void

results matching ""

    No results matching ""