diff --git a/src/components/scroll/scroll.ts b/src/components/scroll/scroll.ts
index 2150a528577..d5efbff06a2 100644
--- a/src/components/scroll/scroll.ts
+++ b/src/components/scroll/scroll.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ViewEncapsulation } from '@angular/core';
-import { isTrueProperty } from '../../util/util';
+import { isTrueProperty, assert } from '../../util/util';
/**
* @name Scroll
@@ -22,7 +22,7 @@ import { isTrueProperty } from '../../util/util';
@Component({
selector: 'ion-scroll',
template:
- '
' +
+ '
' +
'
' +
'' +
'
' +
@@ -35,6 +35,7 @@ import { isTrueProperty } from '../../util/util';
encapsulation: ViewEncapsulation.None,
})
export class Scroll {
+
_scrollX: boolean = false;
_scrollY: boolean = false;
_zoom: boolean = false;
@@ -92,19 +93,11 @@ export class Scroll {
* @hidden
*/
zoomDuration: number = 250;
- /**
- * @hidden
- */
- scrollElement: HTMLElement;
- constructor(private _elementRef: ElementRef) {}
+ /** @internal */
+ @ViewChild('scrollContent', { read: ElementRef }) _scrollContent: ElementRef;
- /**
- * @hidden
- */
- ngOnInit() {
- this.scrollElement = this._elementRef.nativeElement.children[0];
- }
+ constructor(private _elementRef: ElementRef) { }
/**
* @hidden
@@ -114,12 +107,13 @@ export class Scroll {
* undefined if the scroll element doesn't exist.
*/
addScrollEventListener(handler: any) {
- if (!this.scrollElement) { return; }
+ assert(this._scrollContent, 'scroll element is missing');
- this.scrollElement.addEventListener('scroll', handler);
+ const ele = this._scrollContent.nativeElement;
+ ele.addEventListener('scroll', handler);
return () => {
- this.scrollElement.removeEventListener('scroll', handler);
+ ele.removeEventListener('scroll', handler);
};
}
diff --git a/src/components/scroll/test/basic/main.html b/src/components/scroll/test/basic/main.html
index e3544c99f2b..38c0db5b49f 100644
--- a/src/components/scroll/test/basic/main.html
+++ b/src/components/scroll/test/basic/main.html
@@ -11,17 +11,17 @@
Horizontal
-
+
Vertical
-
+
Both
-
-
+
+
@@ -38,4 +38,29 @@ Both
background-color: rgba(0,0,0,0.4);
z-index: 5;
}
+
+ .pattern1 {
+ background:
+ radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,
+ radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px),
+ #8a3;
+ background-size: 20px 20px;
+ }
+
+ .pattern2 {
+ background:
+linear-gradient(63deg, #999 23%, transparent 23%) 7px 0,
+linear-gradient(63deg, transparent 74%, #999 78%),
+linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%),
+#444;
+background-size: 16px 48px;
+ }
+
+ .pattern3 {
+ background:
+linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
+linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
+background-color:#708090;
+background-size: 64px 128px
+ }