@fastkit/scroller 0.16.0 → 0.17.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,820 +0,0 @@
1
- import { EV } from '@fastkit/ev';
2
-
3
- declare const easings: {
4
- ease: EasingValues;
5
- linear: EasingValues;
6
- 'ease-in': EasingValues;
7
- 'ease-out': EasingValues;
8
- 'ease-in-out': EasingValues;
9
- };
10
- type EasingName = keyof typeof easings;
11
- type EasingValues = [number, number, number, number];
12
-
13
- /**
14
- * スクロール系メソッドの基本オプション設定です。
15
- */
16
- interface ScrollBaseSettings {
17
- /**
18
- * アニメーションの総合時間をms単位で指定します。
19
- */
20
- duration: number;
21
- /**
22
- * アニメーションのイージングを指定します。
23
- * {@link EasingName}
24
- */
25
- easing: EasingName;
26
- /**
27
- * スクロールアニメーションがユーザーのインタラクションにより中断可能かをboolean値で示します。
28
- */
29
- cancelable: boolean;
30
- }
31
- /**
32
- * Scrollerで利用するスクロール系メソッドのオプション設定です。
33
- */
34
- interface ScrollerScrollSettings extends ScrollBaseSettings {
35
- onProgress?: ScrollCallback;
36
- onCancel?: ScrollCallback;
37
- onDone?: ScrollCallback;
38
- }
39
- interface ScrollSettings extends ScrollerScrollSettings {
40
- container: string | Element;
41
- }
42
- type ScrollerScrollOptions = Partial<ScrollerScrollSettings>;
43
- type ScrollOptions = Partial<ScrollSettings>;
44
- /**
45
- * スクロール関連メソッドによるスクロールアニメーションをキャンセルするメソッドです。<br>
46
- * ユーザーのインタラクション起因の中断の場合、Eventオブジェクトが渡されます。
47
- */
48
- type ScrollCanceller = (event?: Event | null, checkCancelable?: boolean) => void;
49
- /**
50
- * スクロール関連メソッドの返却値となるインターフェースです。
51
- */
52
- interface ScrollResult {
53
- /**
54
- * スクロールをキャンセルするメソッドです。
55
- */
56
- cancel: ScrollCanceller;
57
- /**
58
- * スクロールの完了、キャンセル、中断を問わず終了を検知するPromiseインスタンスです。
59
- */
60
- promise: Promise<void>;
61
- /**
62
- * スクロール開始位置から完了位置までの想定px数をx、y軸共に返却します。<br>
63
- * スクロールが途中でキャンセルされた場合はこのpxが加算されていない事もあります。
64
- */
65
- plans: {
66
- x: number;
67
- y: number;
68
- };
69
- }
70
- /**
71
- * スクロール関連の各種メソッドにおいて、コールバックメソッドに渡されるインターフェースです。
72
- */
73
- interface ScrollCallbackValues {
74
- /**
75
- * スクロール中のコンテナ要素です。
76
- */
77
- container: Element;
78
- /**
79
- * スクロールの進捗を0〜1で示します。
80
- */
81
- progress: number;
82
- /**
83
- * スクロールが中断されている場合trueを示します。
84
- */
85
- aborted: boolean;
86
- /**
87
- * ユーザーのインタラクションによりスクロールが中断されていた場合、そのEventオブジェクトが設定されます。
88
- */
89
- abortEventSource: Event | null;
90
- }
91
- type ScrollCallback = (scrollToCallbackValues: ScrollCallbackValues) => any;
92
- /**
93
- * スクロール値をx軸、y軸で示します。
94
- */
95
- interface ScrollPosition {
96
- x: number;
97
- y: number;
98
- }
99
- declare const defaultBaseSettings: ScrollBaseSettings;
100
- declare const defaultSettings: ScrollSettings;
101
-
102
- /**
103
- * 指定の差分だけコンテナをスクロールします。
104
- * @param diffX - 横軸の移動量(px)です。デフォルトは0です。
105
- * @param diffY - 縦軸の移動量(px)です。デフォルトは0です。
106
- * @param options - スクロールオプション
107
- */
108
- declare function scrollBy(diffX: number, diffY: number, options?: ScrollOptions): ScrollResult;
109
-
110
- /**
111
- * 任意の位置(px)へコンテナをスクロールします。
112
- * @param scrollPosition - スクロール先を指定します。x, y 共にオプショナルなるです。未指定の軸は現在のスクロール値のまま保持されます。
113
- * @param options - スクロールオプション
114
- */
115
- declare function scrollTo(scrollPosition: Partial<ScrollPosition>, options?: ScrollOptions): ScrollResult;
116
-
117
- /**
118
- * スクロール先の要素をElement or CSSクエリストリングで示します。
119
- */
120
- type ScrollToElementTarget = string | Element;
121
- /**
122
- * 要素へスクロールする際のオプション設定です。
123
- */
124
- interface ScrollToElementSettings {
125
- /**
126
- * 要素へスクロールする際、そのスクロール先をずらす際に設定します。<br>
127
- * x, y 個別に設定が可能ですが、シングルのnumberのみを指定した場合、x, y のそれぞれのオプションが有効な場合にのみその軸に設定されます。
128
- */
129
- offset: number | {
130
- x?: number;
131
- y?: number;
132
- };
133
- /**
134
- * 横スクロールの可否を示します。
135
- */
136
- x: boolean;
137
- /**
138
- * 縦スクロールの可否を示します。
139
- */
140
- y: boolean;
141
- }
142
- /**
143
- * 要素スクロール利用事のデフォルト設定です。
144
- * {@link ScrollToElementSettings}
145
- */
146
- declare const scrollToElementSettingsDefaults: ScrollToElementSettings;
147
- /**
148
- * 要素へスクロールさせる際のオプション設定です。
149
- */
150
- type ScrollToElementOptions = Partial<ScrollOptions & ScrollToElementSettings>;
151
- /**
152
- * 任意の要素の位置へスクロールします。
153
- * @param target - スクロール先の要素
154
- * @param options - スクロールオプション
155
- */
156
- declare function scrollToElement(target: ScrollToElementTarget, options?: ScrollToElementOptions): ScrollResult;
157
-
158
- /**
159
- * y軸の両端の辺を示します。
160
- */
161
- type ScrollYSide = 'top' | 'bottom';
162
- /**
163
- * x軸の両端の辺を示します。
164
- */
165
- type ScrollXSide = 'left' | 'right';
166
- /**
167
- * コンテナの4辺を示します。
168
- */
169
- type ScrollSide = ScrollYSide | ScrollXSide;
170
- /**
171
- * コンテナの辺へスクロールさせる際のターゲット指定のパターンです。
172
- */
173
- type ScrollToSideTargets = ScrollSide | [ScrollSide] | [ScrollYSide, ScrollXSide] | [ScrollXSide, ScrollYSide];
174
- /**
175
- * コンテナをいずれかの辺までスクロールします。
176
- * @param targets - 辺を指定します。シングルの文字列、及び配列に対応しています。
177
- * @param options - スクロールオプション
178
- */
179
- declare function scrollToSide(targets: ScrollToSideTargets, options?: ScrollOptions): ScrollResult;
180
- /**
181
- * コンテナを上辺までスクロールします。
182
- * @param options - スクロールオプション
183
- */
184
- declare function scrollToTop(options?: ScrollOptions): ScrollResult;
185
- /**
186
- * コンテナを右辺までスクロールします。
187
- * @param options - スクロールオプション
188
- */
189
- declare function scrollToRight(options?: ScrollOptions): ScrollResult;
190
- /**
191
- * コンテナを下辺までスクロールします。
192
- * @param options - スクロールオプション
193
- */
194
- declare function scrollToBottom(options?: ScrollOptions): ScrollResult;
195
- /**
196
- * コンテナを左辺までスクロールします。
197
- * @param options - スクロールオプション
198
- */
199
- declare function scrollToLeft(options?: ScrollOptions): ScrollResult;
200
- /**
201
- * コンテナを左上コーナーまでスクロールします。
202
- * @param options - スクロールオプション
203
- */
204
- declare function scrollToLeftTop(options?: ScrollOptions): ScrollResult;
205
- /**
206
- * コンテナを左下コーナーまでスクロールします。
207
- * @param options - スクロールオプション
208
- */
209
- declare function scrollToLeftBottom(options?: ScrollOptions): ScrollResult;
210
- /**
211
- * コンテナを右上コーナーまでスクロールします。
212
- * @param options - スクロールオプション
213
- */
214
- declare function scrollToRightTop(options?: ScrollOptions): ScrollResult;
215
- /**
216
- * コンテナを右下コーナーまでスクロールします。
217
- * @param options - スクロールオプション
218
- */
219
- declare function scrollToRightBottom(options?: ScrollOptions): ScrollResult;
220
-
221
- declare const SCROLLABLE_KEY_CODES: number[];
222
- interface PreventScrollOptions {
223
- hideScrollbar: boolean;
224
- }
225
- interface PreventScrollContext {
226
- options: PreventScrollOptions;
227
- el: PreventScrollElement;
228
- overflowOrigin?: string | null;
229
- lockPosition: {
230
- x: number;
231
- y: number;
232
- };
233
- }
234
- interface PreventScrollElement extends HTMLElement {
235
- __ps_ctx__: PreventScrollContext;
236
- }
237
- declare function enableScroll(el: Element): void;
238
- declare function disableScroll(el: Element, opts?: Partial<PreventScrollOptions>): void;
239
-
240
- type ScrollToElementAdditionalOffset = number | {
241
- x?: number;
242
- y?: number;
243
- } | ((scroller: Scroller) => number | {
244
- x?: number;
245
- y?: number;
246
- } | undefined);
247
- /**
248
- * [[Scroller]]を任意のElementまでスクロールさせる際のオプションです。
249
- * 詳細は [[ScrollerScrollOptions]] 及び、 [[ScrollToElementSettings]] を参照してください。
250
- */
251
- type ScrollerScrollToElementOptions = Partial<ScrollerScrollOptions & ScrollToElementSettings>;
252
- /**
253
- * Scrollerに縦スクロールが発生した際の方向を示すTypeです。
254
- */
255
- type ScrollYDirection = 'top' | 'bottom';
256
- /**
257
- * Scrollerに横スクロールが発生した際の方向を示すTypeです。
258
- */
259
- type ScrollXDirection = 'left' | 'right';
260
- /**
261
- * Scrollerにスクロールが発生した際の方向を示すTypeです。
262
- */
263
- type ScrollDirection = ScrollYDirection | ScrollXDirection;
264
- /**
265
- * スクロールの軸を示します。
266
- * xは水平、
267
- * yは垂直をそれぞれ示します
268
- */
269
- type ScrollAxis = 'x' | 'y';
270
- interface ScrollSizeObserverSetting {
271
- interval: number;
272
- width: boolean;
273
- height: boolean;
274
- }
275
- /**
276
- * Scrollerの基本セッティングです。
277
- * 個々のフィールドの詳細は[[Scroller]]の同名プロパティを参照してください。
278
- */
279
- interface ScrollerSetting {
280
- el: Element | string | null;
281
- scrollingJudgeInterval: number;
282
- baseAxis: ScrollAxis;
283
- scrollSizeObserver: Partial<ScrollSizeObserverSetting>;
284
- }
285
- /**
286
- * Elementのscrollイベントを検知した際に、通知する情報です
287
- * 現在のスクロールポジションや、スクロール開始(or前回のtick)からのスクロール量が渡されます。
288
- */
289
- interface ScrollerPayload {
290
- /**
291
- * [[Scroller.scrollTop]] が渡されます
292
- */
293
- top: number;
294
- /**
295
- * [[Scroller.scrollLeft]] が渡されます
296
- */
297
- left: number;
298
- /**
299
- * [[Scroller.scrollBottom]] が渡されます
300
- */
301
- bottom: number;
302
- /**
303
- * [[Scroller.scrollRight]] が渡されます
304
- */
305
- right: number;
306
- /**
307
- * 発生したスクロールの軸が渡されます。
308
- * 斜めスクロールが発生した際は、x、yのうち移動量が大きいものが自動判定されて渡されます。
309
- * どちらも同じ移動量であった場合は[[Scroller.baseAxis]]の設定値が渡されます。
310
- */
311
- axis: ScrollAxis;
312
- /**
313
- * 発生したスクロールの方向が渡されます。
314
- * 斜めスクロールが発生した際は、x、yのうち移動量が大きいものが自動判定されて渡されます。
315
- * どちらも同じ移動量であった場合は[[Scroller.baseAxis]]の設定値が渡されます。
316
- */
317
- direction: ScrollDirection;
318
- /**
319
- * 発生したスクロールの水平方向が渡されます。
320
- */
321
- directionX: ScrollXDirection;
322
- /**
323
- * 発生したスクロールの垂直方向が渡されます。
324
- */
325
- directionY: ScrollYDirection;
326
- /**
327
- * [[Scroller.on]]('scroll')時の前回からの水平移動量が渡されます。
328
- */
329
- tickedX: number;
330
- /**
331
- * [[Scroller.on]]('scroll')時の前回からの垂直移動量が渡されます。
332
- */
333
- tickedY: number;
334
- /**
335
- * [[Scroller.on]]('scrollStart')時からの合計水平移動量が渡されます。
336
- */
337
- totalX: number;
338
- /**
339
- * [[Scroller.on]]('scrollStart')時からの合計垂直移動量が渡されます。
340
- */
341
- totalY: number;
342
- }
343
- /**
344
- * Scrollerは設定されたElementのスクロール開始、tick、終了を検知し
345
- * イベントを通知します。
346
- * これらのイベントを購読する事でスクロール量や移動方向を検知可能です。
347
- */
348
- interface ScrollerScrollEventMap {
349
- /**
350
- * スクロールの開始時に発生します。
351
- */
352
- scrollStart: ScrollerPayload;
353
- /**
354
- * 毎スクロール検知時に発生します。
355
- */
356
- scroll: ScrollerPayload;
357
- /**
358
- * スクロールの終了時に発生します。
359
- */
360
- scrollEnd: ScrollerPayload;
361
- }
362
- /**
363
- * Scrollerに発生するイベントの全てです。
364
- */
365
- interface ScrollerEventMap extends ScrollerScrollEventMap {
366
- /**
367
- * Scrollerが利用可能になった時(Elementが設定されて初期化が完了した)に発生します。
368
- */
369
- ready: void;
370
- /**
371
- * [[Scroller.state]]が変更された時に発生します。
372
- */
373
- changeState: ScrollerState;
374
- /**
375
- * [[Scroller.el]]のサイズ変更を検知した際に発生します。
376
- */
377
- resize: {
378
- width: number;
379
- height: number;
380
- };
381
- /**
382
- * [[Scroller.lastAxis]]の変更を検知した際に発生します。
383
- */
384
- changeAxis: ScrollAxis;
385
- /**
386
- * [[Scroller.lastDirection]]の変更を検知した際に発生します。
387
- */
388
- changeLastDirection: ScrollDirection;
389
- /**
390
- * [[Scroller.lastYDirection]]の変更を検知した際に発生します。
391
- */
392
- changeLastYDirection: ScrollYDirection;
393
- /**
394
- * [[Scroller.lastXDirection]]の変更を検知した際に発生します。
395
- */
396
- changeLastXDirection: ScrollXDirection;
397
- }
398
- /**
399
- * Scrollerの状態を示します。
400
- */
401
- declare enum ScrollerState {
402
- /**
403
- * Scrollerが初期化されていない(Elementが設定されていない)状態を示します。
404
- */
405
- Pending = "pending",
406
- /**
407
- * Scrollerが初期化されているが、[[Scroller.el]]のリサイズやスクロールのイベント監視が動作していない状態を示します。
408
- */
409
- Ready = "ready",
410
- /**
411
- * Scrollerが初期化されていて、[[Scroller.el]]のリサイズやスクロールのイベント監視が動作している状態を示します。
412
- */
413
- Running = "running",
414
- /**
415
- * [[Scroller.destroy]]が実行され、Scrollerが利用不可である状態を示します。
416
- */
417
- Destroyed = "destroyed"
418
- }
419
- /**
420
- * Scrollerクラスの状態を監視&同期するオブジェクトが
421
- * 保有すべきプロパティ一覧です。
422
- * 個々のプロパティ名は、同名のScrollerクラスのプロパティを参照して下さい
423
- */
424
- interface ScrollerObserver {
425
- state: ScrollerState;
426
- isPending: boolean;
427
- isReady: boolean;
428
- isRunning: boolean;
429
- isDestroyed: boolean;
430
- scrollEnabled: boolean;
431
- containerWidth: number;
432
- containerHeight: number;
433
- scrollWidth: number;
434
- scrollHeight: number;
435
- scrollableX: boolean;
436
- scrollableY: boolean;
437
- scrollTop: number;
438
- scrollLeft: number;
439
- scrollRight: number;
440
- scrollBottom: number;
441
- lastAxis: ScrollAxis;
442
- lastDirection: ScrollDirection;
443
- lastYDirection: ScrollYDirection;
444
- lastXDirection: ScrollXDirection;
445
- nowScrolling: boolean;
446
- }
447
- /**
448
- * Scrollerクラスの状態を監視&同期するオブジェクトが
449
- * 保有すべきプロパティ一のキー覧です。
450
- */
451
- type ScrollerObservableKeys = keyof ScrollerObserver;
452
- /**
453
- * スクロールを停止させるためのソースオブジェクト
454
- */
455
- type ScrollStopper = number | string | Record<string, unknown> | symbol;
456
- /**
457
- * 任意のElement(or HTML Document)のスクロールやサイズ変更を監視し、その情報を通知するクラスです。<br>
458
- * <a href="https://dadajam4.github.io/dadajam4/ev/classes/_ev_.ev.html" target="_blank">EV</a>を継承しており、イベントの購読[[Scroller.on]]等のインターフェースを利用するか、
459
- * [[Scroller.observe]]メソッドを利用します。<br>
460
- * [[Scroller.on]]、[[Scroller.once]]で購読可能なイベントについては[[ScrollerEventMap]]を参照してください。
461
- */
462
- declare class Scroller extends EV<ScrollerEventMap> {
463
- /**
464
- * Scrollerクラスの状態を監視&同期するオブジェクトが
465
- * 保有すべきプロパティ一のキーの配列です。
466
- */
467
- static readonly scrollerObservableKeys: (keyof ScrollerObserver)[];
468
- /**
469
- * Scrollerの状態を示すenum値です。
470
- * {@link ScrollerState}
471
- */
472
- static readonly States: typeof ScrollerState;
473
- /**
474
- * スクロールを検知してから、移動がなくなった際に、何ms後にスクロール終了と判定するかのインターバル値を示します。
475
- * デフォルトは500です。
476
- */
477
- scrollingJudgeInterval: number;
478
- /**
479
- * 縦、横のどちらのスクロールを基準とするかを示します。
480
- * デフォルトはyです。<br>
481
- * この設定は[[Scroller.toElement]]のデフォルト値にも影響します。
482
- */
483
- baseAxis: ScrollAxis;
484
- /**
485
- * スクロール系メソッド[[Scroller.to]]等を利用する際のデフォルトの設定を示します。
486
- */
487
- scrollSettingsDefaults: ScrollBaseSettings;
488
- /**
489
- * [[Scroller.toElement]]のデフォルトオプションの設定を示します。
490
- */
491
- scrollToElementSettingsDefaults: ScrollerScrollToElementOptions;
492
- scrollSizeObserver?: ScrollSizeObserverSetting;
493
- /**
494
- * 設定されたElement要素です。
495
- * 初期化が完了していない時には本getterはundefinedを返却する事に注意してください。
496
- */
497
- get el(): Element | null;
498
- /**
499
- * 現在の状態です。<br>
500
- * {@link ScrollerState}
501
- */
502
- get state(): ScrollerState;
503
- /**
504
- * 未初期化である場合trueを示します。
505
- */
506
- get isPending(): boolean;
507
- /**
508
- * 初期化済み&停止状態である場合trueを示します。
509
- */
510
- get isReady(): boolean;
511
- /**
512
- * 初期化済み&動作中である場合trueを示します。
513
- */
514
- get isRunning(): boolean;
515
- /**
516
- * インスタンスが破棄済みである場合trueを示します。
517
- */
518
- get isDestroyed(): boolean;
519
- /**
520
- * スクロールの有効状態を取得します
521
- */
522
- get scrollEnabled(): boolean;
523
- /**
524
- * スクロール要素の幅を示します。
525
- */
526
- get containerWidth(): number;
527
- /**
528
- * スクロール要素の高さを示します。
529
- */
530
- get containerHeight(): number;
531
- /**
532
- * スクロール要素内のコンテンツの幅を示します。
533
- */
534
- get scrollWidth(): number;
535
- /**
536
- * スクロール要素内のコンテンツの高さを示します。
537
- */
538
- get scrollHeight(): number;
539
- /**
540
- * x軸にスクロール可能な場合trueを示します
541
- */
542
- get scrollableX(): boolean;
543
- /**
544
- * y軸にスクロール可能な場合trueを示します
545
- */
546
- get scrollableY(): boolean;
547
- /**
548
- * 現在の上辺からのスクロール量を示します。
549
- */
550
- get scrollTop(): number;
551
- set scrollTop(scrollTop: number);
552
- /**
553
- * 現在の右辺からのスクロール量を示します。
554
- */
555
- get scrollRight(): number;
556
- set scrollRight(scrollRight: number);
557
- /**
558
- * 現在の下辺からのスクロール量を示します。
559
- */
560
- get scrollBottom(): number;
561
- set scrollBottom(scrollBottom: number);
562
- /**
563
- * 現在の左辺からのスクロール量を示します。
564
- */
565
- get scrollLeft(): number;
566
- set scrollLeft(scrollLeft: number);
567
- /**
568
- * 現在スクロール中である場合trueを示します。
569
- */
570
- get nowScrolling(): boolean;
571
- /**
572
- * 最後に検知したスクロールの軸を示します。
573
- */
574
- get lastAxis(): ScrollAxis;
575
- /**
576
- * 最後に検知したスクロールの方向を示します。
577
- */
578
- get lastDirection(): ScrollDirection;
579
- /**
580
- * 最後に検知したスクロールの垂直方向を示します。
581
- */
582
- get lastYDirection(): ScrollYDirection;
583
- /**
584
- * 最後に検知したスクロールの水平方向を示します。
585
- */
586
- get lastXDirection(): ScrollXDirection;
587
- /**
588
- * 最後に検知したスクロールにより通知した情報を示します。
589
- */
590
- get lastPayload(): ScrollerPayload;
591
- private _el;
592
- private _eventTarget;
593
- private _isDocumentElement;
594
- private _isBodyElement;
595
- private _isRootElement;
596
- private _state;
597
- private _containerWidth;
598
- private _containerHeight;
599
- private _scrollWidth;
600
- private _scrollHeight;
601
- private _scrollTop;
602
- private _scrollRight;
603
- private _scrollBottom;
604
- private _scrollLeft;
605
- private _lastAxis;
606
- private _lastDirection;
607
- private _lastYDirection;
608
- private _lastXDirection;
609
- private _nowScrolling;
610
- private _readyResolvers;
611
- private _scrollingJudgeTimerId;
612
- private _startX;
613
- private _startY;
614
- private _tickedX;
615
- private _tickedY;
616
- private _lastTotalX;
617
- private _lastTotalY;
618
- private _scrollListener?;
619
- private _resizeListener?;
620
- private _resizeObserver?;
621
- private _scrollToResult;
622
- private _observers;
623
- private _scrollStoppers;
624
- private _scrollSizeObserverPollingId;
625
- private _scrollSizeObserverSuspended;
626
- private _visibilityListener;
627
- /**
628
- * Scrollerインスタンスを作成します。
629
- * コンテキストとなるElementをこの時点で指定するか否かは任意です。
630
- *
631
- * @param settingOrElementOrQueryString - 任意です。{@link ScrollerSetting}か Element(or cssクエリセレクタ文字列)を直接指定します。この時点でElementを指定しない場合は、[[setElement]]を実行するまでインスタンスは動作しません。
632
- */
633
- constructor(settingOrElementOrQueryString?: Partial<ScrollerSetting> | Element | string);
634
- /**
635
- * インスタンスにElementを設定します。特別な理由(SSRの利用等)によりコンストラクタでElementを指定できない場合、
636
- * 本メソッドを利用しブラウザコンテキスト配下で本メソッドを実行してください。
637
- * @param el - Element、もしくはCSSクエリセレクタ文字列を指定します。
638
- */
639
- setElement(el?: Element | string | null): void;
640
- private _scrollToElementAdditionalOffset;
641
- setScrollToElementAdditionalOffset(offset: ScrollToElementAdditionalOffset | undefined): void;
642
- deleteScrollToElementAdditionalOffset(): void;
643
- /**
644
- * インスタンスが実行可能になった際にresolveされるPromiseインスタンスを返却します。
645
- */
646
- ready(): Promise<void>;
647
- /**
648
- * インスタンスの動作を開始します。本インスタンスはElementが設定され初期化された際に自動で動作を開始しますが、
649
- * [[Scroller.stop]]メソッドを利用し動作を停止した後に再開する場合に本メソッドを利用します。
650
- */
651
- start(): Promise<void>;
652
- /**
653
- * インスタンスの動作(スクロール、リサイズイベントの検知等)を停止します。
654
- * 何らかの理由で動作を停止させたい場合に利用してください。
655
- * 本メソッドを実行後もインスタンス内の状態は保持されたままです。
656
- * 完全にインスタンスを破棄するためには[[Scroller.destroy]]を利用してください。
657
- */
658
- stop(): void;
659
- /**
660
- * インスタンスの動作を停止し、内部情報を完全に破棄します。
661
- * これに伴い、スクロール中であった場合にはキャンセルされ、以後イベント通知は完全に行われません。
662
- * また[[Scroller.start]]メソッドでの再利用も不可となります。
663
- * 本インスタンスの利用を完全に停止する場合に必ず実行し、利用側のオブジェクト等において本インスタンスへの参照を完全に削除してください。
664
- * 本メソッドはSPA等でのサービスにおいては意識的に実行する事を強く推奨します。
665
- */
666
- destroy(): void;
667
- /**
668
- * インスタンス内部のスクロール量や、Elementのサイズを強制的に更新します。
669
- * 基本的に利用が必要なケースはありませんが、何らかの理由で更新をトリガーしたい場合に利用します。
670
- */
671
- update(): void;
672
- /**
673
- * インスタンス内の情報をjsonオブジェクトとして返却します。
674
- * 情報の詳細は[[ScrollerObserver]]を参照してください。
675
- */
676
- toJSON(): ScrollerObserver;
677
- /**
678
- * [[Scroller.toJSON]]の情報を文字列として返却します。
679
- */
680
- toString(): string;
681
- /**
682
- * 本インスタンスの情報を購読するためのオブジェクトを設定する事で、
683
- * インスタンスの内部情報が変更される度にパラメータが同期されます。
684
- * 設定するオブジェクトは[[ScrollerObserver]]のインターフェースを満たしていれば内容は問いません。
685
- * 本機能により同期される方法は単純にオブジェクトプロパティへの変数代入です。
686
- * 従って対象となるプロパティをgetterとして実装(Ex: Vue computed等、、)しておく事により、
687
- * 同期を受け取るオブジェクト側でパラメータ変更後の動作をリアクティブに実装可能です。
688
- * @param observer - 同期させたいオブジェクト
689
- * @returns 同期を停止するためのメソッド
690
- */
691
- observe(observer: ScrollerObserver): () => void;
692
- /**
693
- * [[Scroller.observe]]でパラメータ同期中のオブジェクトを停止します。
694
- * [[Scroller.destroy]]実行時にも、同期中のオブジェクトは全停止されますが、destroy前に任意のタイミングで停止したい場合
695
- * 本メソッドを利用します。
696
- * @param observer - 同期中のオブジェクト
697
- */
698
- unobserve(observer: ScrollerObserver): void;
699
- /**
700
- * スクロール中であった場合、スクロールをキャンセルします。
701
- */
702
- cancel(): void;
703
- /**
704
- * x, yの差分pxを指定しスクロールします。
705
- * メソッド、パラメータの詳細は[[scrollBy]]を参照してください。
706
- * @param diffX - 横移動量
707
- * @param diffY - 縦移動量
708
- * @param options - スクロールオプション
709
- */
710
- by(diffX: number, diffY: number, options?: ScrollerScrollOptions): ScrollResult;
711
- /**
712
- * 指定の座標へスクロールします。
713
- * メソッド、パラメータの詳細は[[scrollTo]]を参照してください。
714
- * @param scrollPosition - 座標
715
- * @param options - スクロールオプション
716
- */
717
- to(scrollPosition: Partial<ScrollPosition>, options?: ScrollerScrollOptions): ScrollResult;
718
- /**
719
- * 指定の要素の位置へスクロールします。
720
- * メソッド、パラメータの詳細は[[scrollToElement]]を参照してください。
721
- * オプションのx, yが未設定であった場合、[[Scroller.baseAxis]]により自動設定されます。
722
- * @param target - スクロール先の要素
723
- * @param options - スクロールオプション
724
- */
725
- toElement(target: ScrollToElementTarget, options?: ScrollerScrollToElementOptions): ScrollResult;
726
- /**
727
- * 指定の辺へスクロールします。
728
- * メソッド、パラメータの詳細は[[scrollToSide]]を参照してください。
729
- * @param targets - スクロール先
730
- * @param options - スクロールオプション
731
- */
732
- toSide(targets: ScrollToSideTargets, options?: ScrollerScrollOptions): ScrollResult;
733
- /**
734
- * 上辺へスクロールします。
735
- * メソッド、パラメータの詳細は[[scrollToTop]]を参照してください。
736
- * @param options - スクロールオプション
737
- */
738
- toTop(options?: ScrollerScrollOptions): ScrollResult;
739
- /**
740
- * 右辺へスクロールします。
741
- * メソッド、パラメータの詳細は[[scrollToRight]]を参照してください。
742
- * @param options - スクロールオプション
743
- */
744
- toRight(options?: ScrollerScrollOptions): ScrollResult;
745
- /**
746
- * 下辺へスクロールします。
747
- * メソッド、パラメータの詳細は[[scrollToBottom]]を参照してください。
748
- * @param options - スクロールオプション
749
- */
750
- toBottom(options?: ScrollerScrollOptions): ScrollResult;
751
- /**
752
- * 左辺へスクロールします。
753
- * メソッド、パラメータの詳細は[[scrollToLeft]]を参照してください。
754
- * @param options - スクロールオプション
755
- */
756
- toLeft(options?: ScrollerScrollOptions): ScrollResult;
757
- /**
758
- * 左上コーナーへスクロールします。
759
- * メソッド、パラメータの詳細は[[scrollToLeftTop]]を参照してください。
760
- * @param options - スクロールオプション
761
- */
762
- toLeftTop(options?: ScrollerScrollOptions): ScrollResult;
763
- /**
764
- * 左下コーナーへスクロールします。
765
- * メソッド、パラメータの詳細は[[scrollToLeftBottom]]を参照してください。
766
- * @param options - スクロールオプション
767
- */
768
- toLeftBottom(options?: ScrollerScrollOptions): ScrollResult;
769
- /**
770
- * 右上コーナーへスクロールします。
771
- * メソッド、パラメータの詳細は[[scrollToRightTop]]を参照してください。
772
- * @param options - スクロールオプション
773
- */
774
- toRightTop(options?: ScrollerScrollOptions): ScrollResult;
775
- /**
776
- * 右下コーナーへスクロールします。
777
- * メソッド、パラメータの詳細は[[scrollToRightBottom]]を参照してください。
778
- * @param options - スクロールオプション
779
- */
780
- toRightBottom(options?: ScrollerScrollOptions): ScrollResult;
781
- /**
782
- * スクロールの停止を要求します。
783
- * @param stopper - 停止要求ソース
784
- */
785
- pushScrollStopper(stopper: ScrollStopper): () => void;
786
- /**
787
- * スクロールの停止要求を解除します。<br>
788
- * 別のプロセスにより異なる[[ScrollStopper]]が登録されている場合、
789
- * スクロールは再開されない事に注意してください。
790
- * @param stopper - 停止要求ソース
791
- */
792
- removeScrollStopper(stopper: ScrollStopper): void;
793
- private _setup;
794
- private _setState;
795
- private _checkDestroyed;
796
- private _update;
797
- private _updateContainerSize;
798
- private _updateScrollSize;
799
- private _startScrollSizeObserver;
800
- private _stopScrollSizeObserver;
801
- private _updateScrollPositions;
802
- private _startListeners;
803
- private _stopListeners;
804
- private _clearScrollingJudgeTimer;
805
- private _onResize;
806
- private _triggerScrollTick;
807
- private _onScroll;
808
- private _syncToObserver;
809
- private _syncToObservers;
810
- private _checkElement;
811
- private _createMergedScrollOptions;
812
- private _createMergedScrollToElementOptions;
813
- private _clearScrollToResult;
814
- private _setScrollToResult;
815
- private _updateScrollable;
816
- private _scrollEnable;
817
- private _scrollDisable;
818
- }
819
-
820
- export { type PreventScrollContext, type PreventScrollElement, type PreventScrollOptions, SCROLLABLE_KEY_CODES, type ScrollAxis, type ScrollBaseSettings, type ScrollCallback, type ScrollCallbackValues, type ScrollCanceller, type ScrollDirection, type ScrollOptions, type ScrollPosition, type ScrollResult, type ScrollSettings, type ScrollSide, type ScrollSizeObserverSetting, type ScrollStopper, type ScrollToElementAdditionalOffset, type ScrollToElementOptions, type ScrollToElementSettings, type ScrollToElementTarget, type ScrollToSideTargets, type ScrollXDirection, type ScrollXSide, type ScrollYDirection, type ScrollYSide, Scroller, type ScrollerEventMap, type ScrollerObservableKeys, type ScrollerObserver, type ScrollerPayload, type ScrollerScrollEventMap, type ScrollerScrollOptions, type ScrollerScrollSettings, type ScrollerScrollToElementOptions, type ScrollerSetting, ScrollerState, defaultBaseSettings, defaultSettings, disableScroll, enableScroll, scrollBy, scrollTo, scrollToBottom, scrollToElement, scrollToElementSettingsDefaults, scrollToLeft, scrollToLeftBottom, scrollToLeftTop, scrollToRight, scrollToRightBottom, scrollToRightTop, scrollToSide, scrollToTop };