滚动 Scrolling

scrolling 的 API

Angular CDK scrolling API 参考文档

import {ScrollingModule} from '@angular/cdk/scrolling';

本服务包含所有已注册的可滚动对象的引用,并在任何一个可滚动对象的引用发出滚动事件时触发事件。

Service contained all registered Scrollable references and emits an event when any one of the Scrollable references emit a scrolled event.

属性
名称 描述

scrollContainers: Map<CdkScrollable, Subscription>

所有可滚动对象引用的映射表,由可滚动对象及其对滚动事件的订阅组成。

Map of all the scrollable references that are registered with the service and their scroll event subscriptions.

方法
ancestorScrolled

返回一个可观察对象,它只在元素的任何可滚动祖先发生滚动时才会触发。

Returns an observable that emits whenever any of the scrollable ancestors of an element are scrolled.

参数

Parameters

elementOrElementRef

HTMLElement | ElementRef<any>

祖先要监听的元素。

Element whose ancestors to listen for.

auditTimeInMs?

number

要对滚动事件进行限流的毫秒数。

Time to throttle the scroll events.

返回值

Returns

Observable<CdkScrollable | void>
deregister

注销一个可滚动对象的引用,并从它的 scroll 事件的可观察对象中取消订阅。

Deregisters a Scrollable reference and unsubscribes from its scroll event observable.

参数

Parameters

scrollable

CdkScrollable

要注销的可滚动实例。

Scrollable instance to be deregistered.

getAncestorScrollContainers

返回所有包含所指定元素的已注册可滚动对象。

Returns all registered Scrollables that contain the provided element.

参数

Parameters

elementOrElementRef

HTMLElement | ElementRef<any>

返回值

Returns

CdkScrollable[]
register

使用该服务注册一个可滚动的实例,并侦听其滚动的事件。当可滚动对象发生滚动时,此服务会把事件发送到记录其滚动的可观察对象中。

Registers a scrollable instance with the service and listens for its scrolled events. When the scrollable is scrolled, the service emits the event to its scrolled observable.

参数

Parameters

scrollable

CdkScrollable

要注册的可滚动对象实例。

Scrollable instance to be registered.

scrolled

返回一个可观察对象,它会在任何已注册的可滚动对象引用(或 window, document, body)中发生滚动事件时发出一个事件。可以提供一个毫秒数来来改写默认的“限流”时间。

Returns an observable that emits an event whenever any of the registered Scrollable references (or window, document, or body) fire a scrolled event. Can provide a time in ms to override the default "throttle" time.

注意:为了避免每次滚动事件都发生变更检测,从这个流发出的所有事件都会在 Angular Zone 之外运行。如果你要在滚动事件中更新任何数据绑定,就必须使用 NgZone.run 来运行回调。

Note: in order to avoid hitting change detection for every scroll event, all of the events emitted from this stream will be run outside the Angular zone. If you need to update any data bindings as a result of a scroll event, you have to run the callback using NgZone.run.

参数

Parameters

auditTimeInMs

number = DEFAULT_SCROLL_TIME

返回值

Returns

Observable<CdkScrollable | void>

该指令的元素发生滚动时发送一个事件。使用 ScrollDispatcher 服务注册自己,以便把自己包含在滚动事件集合中,并通过该服务来监听。

Sends an event when the directive's element is scrolled. Registers itself with the ScrollDispatcher service to include itself as part of its collection of scrolling events that it can be listened to through the service.

选择器: [cdk-scrollable] [cdkScrollable]
属性
名称 描述

dir: Directionality

elementRef: ElementRef<HTMLElement>

ngZone: NgZone

scrollDispatcher: ScrollDispatcher

方法
elementScrolled

返回在宿主元素上发生 scroll 事件时会触发的可观察对象。

Returns observable that emits when a scroll event is fired on the host element.

返回值

Returns

Observable<Event>
getElementRef

获取视口的 ElementRef。

Gets the ElementRef for the viewport.

返回值

Returns

ElementRef<HTMLElement>
measureScrollOffset

测量相对于视口指定边缘的滚动偏移量。这个方法可以用来代替对 scrollLeft 或 scrollTop 的直接检查,因为各浏览器对于 scrollLeft 在 RTL 中的理解并不一致。 该方法返回的值是标准化的,左右都总是指向滚动容器的左侧和右侧,与布局方向无关。 start 和 end 在 LTR 上下文中指向左右,在 RTL 上下文则相反。

Measures the scroll offset relative to the specified edge of the viewport. This method can be used instead of directly checking scrollLeft or scrollTop, since browsers are not consistent about what scrollLeft means in RTL. The values returned by this method are normalized such that left and right always refer to the left and right side of the scrolling container irrespective of the layout direction. start and end refer to left and right in an LTR context and vice-versa in an RTL context.

参数

Parameters

from

"top" | "bottom" | "start" | "end" | "left" | "right"

要测量的边缘。

The edge to measure from.

返回值

Returns

number
scrollTo

滚动到指定的偏移量。这是浏览器原生 scrollTo 方法的标准化版本,因为各个浏览器对于 scrollLeft 在 RTL 中的理解并不一致。 对于此方法,无论布局方向如何,左右都总是指向滚动容器的左侧和右侧。start 和 end 在 LTR 上下文中分别指向左右,在 RTL 上下文中则相反。

Scrolls to the specified offsets. This is a normalized version of the browser's native scrollTo method, since browsers are not consistent about what scrollLeft means in RTL. For this method left and right always refer to the left and right side of the scrolling container irrespective of the layout direction. start and end refer to left and right in an LTR context and vice-versa in an RTL context.

参数

Parameters

options

ExtendedScrollToOptions

指定要滚动到的偏移量。

specified the offsets to scroll to.

支持固定大小的虚拟滚动策略。

A virtual scroll strategy that supports fixed-size items.

选择器: cdk-virtual-scroll-viewport[itemSize]
属性
名称 描述
@Input()

itemSize: number

列表中条目的大小(以像素为单位)。

The size of the items in the list (in pixels).

@Input()

maxBufferPx: number

渲染新条目时要渲染的缓冲区的像素数。默认为 200px。

The number of pixels worth of buffer to render for when rendering new items. Defaults to 200px.

@Input()

minBufferPx: number

缓存在视口之外的最小缓冲区数(以像素为单位)。当缓冲区的数量低于这个数时,就会渲染出更多的条目。默认为 100px。

The minimum amount of buffer rendered beyond the viewport (in pixels). If the amount of buffer dips below this number, more items will be rendered. Defaults to 100px.

类似于 ngForOf 的指令,用于渲染虚拟滚动容器中的数据。

A directive similar to ngForOf to be used for rendering data inside a virtual scrolling container.

选择器: [cdkVirtualFor][cdkVirtualForOf]
属性
名称 描述
@Input()

cdkVirtualForOf: DataSource<T> | Observable<T[]> | NgIterable<T> | null | undefined

要显示的 DataSource。

The DataSource to display.

@Input()

cdkVirtualForTemplate: TemplateRef<CdkVirtualForOfContext<T>>

用来生成新元素的模板。

The template used to stamp out new elements.

@Input()

cdkVirtualForTemplateCacheSize: number

缓存的大小,用于存放那些以前没有用过的模板。如果将缓存大小设置为 0 将禁用缓存。默认为 20 个模板。

The size of the cache used to store templates that are not being used for re-use later. Setting the cache size to 0 will disable caching. Defaults to 20 templates.

@Input()

cdkVirtualForTrackBy: TrackByFunction<T> | undefined

TrackByFunction 用于跟踪变更。 TrackByFunction 接受索引和条目,并在跟踪更改时产生一个值作为此条目的标识。

The TrackByFunction to use for tracking changes. The TrackByFunction takes the index and the item and produces a value to be used as the item's identity when tracking changes.

dataStream: Observable<T[] | ReadonlyArray<T>>

只要当前 DataSource 中的数据发生变化,就会发出通知。

Emits whenever the data in the current DataSource changes.

viewChange: Subject<ListRange>

当渲染的数据视图发生变化时触发。

Emits when the rendered view of the data changes.

方法
measureRangeSize

测量指定范围内所有条目的组合大小(水平方向的宽度,垂直方向的高度)。如果该范围包含当前尚未渲染过的条目,则会引发错误。

Measures the combined size (width for horizontal orientation, height for vertical) of all items in the specified range. Throws an error if the range includes items that are not currently rendered.

参数

Parameters

range

ListRange

orientation

"vertical" | "horizontal"

返回值

Returns

number

借助 CdkVirtualForOf 虚拟化滚动行为的视口。

A viewport that virtualizes its scrolling with the help of CdkVirtualForOf.

选择器: cdk-virtual-scroll-viewport
属性
名称 描述
@Input()

orientation: "vertical" | "horizontal"

视口滚动的方向。

The direction the viewport scrolls.

@Output()

scrolledIndexChange: Observable<number>

当视口中可见的第一个元素的索引发生变化时触发。

Emits when the index of the first element visible in the viewport changes.

elementRef: ElementRef<HTMLElement>

renderedRangeStream: Observable<ListRange>

每当渲染范围发生变化时都会发出通知的流。

A stream that emits whenever the rendered range changes.

方法
attach

CdkVirtualScrollRepeater 附加到这个视口。

Attaches a CdkVirtualScrollRepeater to this viewport.

参数

Parameters

forOf

CdkVirtualScrollRepeater<any>
checkViewportSize

更新视口规格并重新渲染。

Update the viewport dimensions and re-render.

detach

拆除当前的 CdkVirtualForOf

Detaches the current CdkVirtualForOf.

elementScrolled

返回在宿主元素上发生 scroll 事件时会触发的可观察对象。

Returns observable that emits when a scroll event is fired on the host element.

返回值

Returns

Observable<Event>
getDataLength

获取绑定到该视口的数据的长度(以条目数表示)。

Gets the length of the data bound to this viewport (in number of items).

返回值

Returns

number
getElementRef

获取视口的 ElementRef。

Gets the ElementRef for the viewport.

返回值

Returns

ElementRef<HTMLElement>
getOffsetToRenderedContentStart

获取从视口起点到渲染数据起始位置的偏移量(以像素为单位)。

Gets the offset from the start of the viewport to the start of the rendered data (in pixels).

返回值

Returns

number | null
getRenderedRange

获取当前渲染的条目范围。

Get the current rendered range of items.

返回值

Returns

ListRange
getViewportSize

获取视口的大小(以像素为单位)。

Gets the size of the viewport (in pixels).

返回值

Returns

number
measureRangeSize

测量指定范围的总组合大小。如果该范围包含未渲染的条目,则抛出此异常。

Measure the total combined size of the given range. Throws if the range includes items that are not rendered.

参数

Parameters

range

ListRange

返回值

Returns

number
measureRenderedContentSize

测量所有渲染条目的组合大小。

Measure the combined size of all of the rendered items.

返回值

Returns

number
measureScrollOffset

从视口的开头得到当前的滚动偏移量(以像素为单位)。

Gets the current scroll offset from the start of the viewport (in pixels).

参数

Parameters

from?

"top" | "bottom" | "start" | "end" | "left" | "right"

测量到边缘的偏移。在垂直模式下默认为 “top”,在水平模式下默认为 “start”。

The edge to measure the offset from. Defaults to 'top' in vertical mode and 'start' in horizontal mode.

返回值

Returns

number
scrollTo

滚动到指定的偏移量。这是浏览器原生 scrollTo 方法的标准化版本,因为各个浏览器对于 scrollLeft 在 RTL 中的理解并不一致。 对于此方法,无论布局方向如何,左右都总是指向滚动容器的左侧和右侧。start 和 end 在 LTR 上下文中分别指向左右,在 RTL 上下文中则相反。

Scrolls to the specified offsets. This is a normalized version of the browser's native scrollTo method, since browsers are not consistent about what scrollLeft means in RTL. For this method left and right always refer to the left and right side of the scrolling container irrespective of the layout direction. start and end refer to left and right in an LTR context and vice-versa in an RTL context.

参数

Parameters

options

ExtendedScrollToOptions

指定要滚动到的偏移量。

specified the offsets to scroll to.

scrollToIndex

滚动到指定索引处的偏移量。

Scrolls to the offset for the given index.

参数

Parameters

index

number

要滚动的元素的索引。

The index of the element to scroll to.

behavior

ScrollBehavior = 'auto'

滚动时要使用的 ScrollBehavior。行为默认是 auto

The ScrollBehavior to use when scrolling. Default is behavior is auto.

scrollToOffset

从视口开始处滚动到指定的偏移量。请注意,这并不会总是与设置 scrollTopscrollLeft 一致。在水平视口中,视图是从右向左的方向,这相当于设置了一个虚构的 scrollRight 属性。

Scrolls to the given offset from the start of the viewport. Please note that this is not always the same as setting scrollTop or scrollLeft. In a horizontal viewport with right-to-left direction, this would be the equivalent of setting a fictional scrollRight property.

参数

Parameters

offset

number

要滚动到的偏移量。

The offset to scroll to.

behavior

ScrollBehavior = 'auto'

滚动时要使用的 ScrollBehavior。行为默认是 auto

The ScrollBehavior to use when scrolling. Default is behavior is auto.

setRenderedContentOffset

设置从视口起点到渲染数据起点或终点的偏移量(以像素为单位)。

Sets the offset from the start of the viewport to either the start or end of the rendered data (in pixels).

参数

Parameters

offset

number

to

"to-start" | "to-end" = 'to-start'
setRenderedRange

设置当前渲染的索引范围。

Sets the currently rendered range of indices.

参数

Parameters

range

ListRange
setTotalContentSize

设置所有内容的总大小(以像素为单位),包括当前未渲染的内容。

Sets the total size of all content (in pixels), including content that is not currently rendered.

参数

Parameters

size

number

具有固定大小已知条目列表的虚拟滚动策略。

Virtual scrolling strategy for lists with items of known fixed size.

方法
attach

把这个滚动策略附加到视口中。

Attaches this scroll strategy to a viewport.

参数

Parameters

viewport

CdkVirtualScrollViewport

要把此策略附加到的视口。

The viewport to attach this strategy to.

detach

这个滚动策略是从当前连接的视口中拆除出来的。

Detaches this scroll strategy from the currently attached viewport.

scrollToIndex

滚动到指定索引的偏移量。

Scroll to the offset for the given index.

参数

Parameters

index

number

要滚动的元素的索引。

The index of the element to scroll to.

behavior

ScrollBehavior

滚动时要使用的 ScrollBehavior。

The ScrollBehavior to use when scrolling.

updateItemAndBufferSize

更新条目大小和缓冲区大小。

Update the item size and buffer size.

参数

Parameters

itemSize

number

虚拟滚动列表中各条目的大小。

The size of the items in the virtually scrolling list.

minBufferPx

number

在需要渲染更多内容之前,缓冲区的最小量(以像素为单位)

The minimum amount of buffer (in pixels) before needing to render more

maxBufferPx

number

渲染时要渲染的缓冲区(以像素为单位)。

The amount of buffer (in pixels) to render when rendering more.

在每个方向上保存视口滚动位置的对象。

Object that holds the scroll position of the viewport in each direction.

属性
名称 描述

left: number

top: number

该策略决定了应该在视口中渲染哪些条目。

A strategy that dictates which items should be rendered in the viewport.

属性
名称 描述

scrolledIndexChange: Observable<number>

当视口中可见的第一个元素的索引发生变化时触发。

Emits when the index of the first element visible in the viewport changes.

方法
attach

把这个滚动策略附加到视口中。

Attaches this scroll strategy to a viewport.

参数

Parameters

viewport

CdkVirtualScrollViewport

要把此策略附加到的视口。

The viewport to attach this strategy to.

detach

把这个滚动策略从当前连接的视口中拆除。

Detaches this scroll strategy from the currently attached viewport.

onContentRendered

当 DOM 中渲染的条目范围发生变化时调用。

Called when the range of items rendered in the DOM has changed.

onContentScrolled

在视口发生滚动时调用(使用 requestAnimationFrame 来防抖)。

Called when the viewport is scrolled (debounced using requestAnimationFrame).

onDataLengthChanged

当数据长度发生变化时调用。

Called when the length of the data changes.

onRenderedOffsetChanged

当渲染条目的偏移量发生变化时调用。

Called when the offset of the rendered items changed.

scrollToIndex

滚动到指定索引的偏移量。

Scroll to the offset for the given index.

参数

Parameters

index

number

要滚动的元素的索引。

The index of the element to scroll to.

behavior

ScrollBehavior

滚动时要使用的 ScrollBehavior。

The ScrollBehavior to use when scrolling.

要被 VirtualScrollViewport 重复的条目

An item to be repeated by the VirtualScrollViewport

属性
名称 描述

dataStream: Observable<T[] | ReadonlyArray<T>>

方法
measureRangeSize

参数

Parameters

range

ListRange

orientation

"vertical" | "horizontal"

返回值

Returns

number

ScrollToOptions 的扩展版本,允许表达相对于视口顶部、底部、左侧、右侧、开头或结尾的滚动偏移量,而不仅仅是顶部和左侧。 请注意:top 和 bottom 属性是互斥的,left 和 right、start 和 end 属性也是如此。

An extended version of ScrollToOptions that allows expressing scroll offsets relative to the top, bottom, left, right, start, or end of the viewport rather than just the top and left. Please note: the top and bottom properties are mutually exclusive, as are the left, right, start, and end properties.

type ExtendedScrollToOptions = _XAxis & _YAxis & ScrollOptions;

CdkVirtualForOf 渲染的条目的上下文

The context for an item rendered by CdkVirtualForOf

type CdkVirtualForOfContext = {
    $implicit: T;
    cdkVirtualForOf: DataSource<T> | Observable<T[]> | NgIterable<T>;
    index: number;
    count: number;
    first: boolean;
    last: boolean;
    even: boolean;
    odd: boolean;
};

默认情况下以毫秒为单位的时间来限制滚动事件的频度。

Time in ms to throttle the scrolling events by default.

const DEFAULT_SCROLL_TIME: 20;

resize 事件的默认节流时间(毫秒数)。

Time in ms to throttle the resize events by default.

const DEFAULT_RESIZE_TIME: 20;

这个注入令牌用来指定虚拟滚动策略。

The injection token used to specify the virtual scrolling strategy.

const VIRTUAL_SCROLL_STRATEGY: InjectionToken<VirtualScrollStrategy>;