Skip to content

Commit 49f06f9

Browse files
ajoslinajoslin
committed
fix(scrollView): make xy scrolling work on ionScroll and ionContent
Closes #1462
1 parent 93e0191 commit 49f06f9

File tree

4 files changed

+57
-11
lines changed

4 files changed

+57
-11
lines changed

‎js/angular/directive/content.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,14 @@
2323
*
2424
* @param {string=} delegate-handle The handle used to identify this scrollView
2525
* with {@link ionic.service:$ionicScrollDelegate}.
26+
* @param {string=} direction Which way to scroll. 'x' or 'y' or 'xy'. Default 'y'.
2627
* @param {boolean=} padding Whether to add padding to the content.
2728
* of the content. Defaults to true on iOS, false on Android.
2829
* @param {boolean=} scroll Whether to allow scrolling of content. Defaults to true.
2930
* @param {boolean=} overflow-scroll Whether to use overflow-scrolling instead of
3031
* Ionic scroll.
32+
* @param {boolean=} scrollbar-x Whether to show the horizontal scrollbar. Default true.
33+
* @param {boolean=} scrollbar-y Whether to show the vertical scrollbar. Default true.
3134
* @param {boolean=} has-bouncing Whether to allow scrolling to bounce past the edges
3235
* of the content. Defaults to true on iOS, false on Android.
3336
* @param {expression=} on-scroll Expression to evaluate when the content is scrolled.
@@ -77,20 +80,19 @@ function($timeout, $controller, $ionicBind) {
7780
$scope.$hasFooter = $scope.$hasSubfooter =
7881
$scope.$hasTabs = $scope.$hasTabsTop =
7982
false;
80-
8183
$ionicBind($scope, $attr, {
8284
$onScroll: '&onScroll',
8385
$onScrollComplete: '&onScrollComplete',
8486
hasBouncing: '@',
8587
padding: '@',
86-
hasScrollX: '@',
87-
hasScrollY: '@',
88+
direction: '@',
8889
scrollbarX: '@',
8990
scrollbarY: '@',
9091
startX: '@',
9192
startY: '@',
9293
scrollEventInterval: '@'
9394
});
95+
$scope.direction = $scope.direction || 'y';
9496

9597
if (angular.isDefined($attr.padding)) {
9698
$scope.$watch($attr.padding, function(newVal) {
@@ -113,8 +115,8 @@ function($timeout, $controller, $ionicBind) {
113115
startY: $scope.$eval($scope.startY) || 0,
114116
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
115117
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
116-
scrollingX: $scope.$eval($scope.hasScrollX) === true,
117-
scrollingY: $scope.$eval($scope.hasScrollY) !== false,
118+
scrollingX: $scope.direction.indexOf('x') >= 0,
119+
scrollingY: $scope.direction.indexOf('y') >= 0,
118120
scrollEventInterval: parseInt($scope.scrollEventInterval, 10) || 10,
119121
scrollingComplete: function() {
120122
$scope.$onScrollComplete({

‎js/angular/directive/list.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,7 @@
203203
* }
204204
* .animated-item {
205205
* line-height: 52px;
206+
* max-height: 52px;
206207
* padding-top: 0;
207208
* padding-bottom: 0;
208209
* -webkit-transition: all 0.15s linear;

‎js/angular/directive/scroll.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@
1010
*
1111
* @param {string=} delegate-handle The handle used to identify this scrollView
1212
* with {@link ionic.service:$ionicScrollDelegate}.
13-
* @param {string=} direction Which way to scroll. 'x' or 'y'. Default 'y'.
13+
* @param {string=} direction Which way to scroll. 'x' or 'y' or 'xy'. Default 'y'.
1414
* @param {boolean=} paging Whether to scroll with paging.
1515
* @param {expression=} on-refresh Called on pull-to-refresh, triggered by an {@link ionic.directive:ionRefresher}.
1616
* @param {expression=} on-scroll Called whenever the user scrolls.
17-
* @param {boolean=} scrollbar-x Whether to show the horizontal scrollbar. Default false.
17+
* @param {boolean=} scrollbar-x Whether to show the horizontal scrollbar. Default true.
1818
* @param {boolean=} scrollbar-y Whether to show the vertical scrollbar. Default true.
1919
* @param {boolean=} zooming Whether to support pinch-to-zoom
2020
* @param {integer=} min-zoom The smallest zoom amount allowed (default is 0.5)
@@ -53,6 +53,7 @@ function($timeout, $controller, $ionicBind) {
5353
minZoom: '@',
5454
maxZoom: '@'
5555
});
56+
$scope.direction = $scope.direction || 'y';
5657

5758
if (angular.isDefined($attr.padding)) {
5859
$scope.$watch($attr.padding, function(newVal) {

‎test/html/scroll.html‎

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,8 @@
5050
<body ng-controller="ThisCtrl">
5151
<ion-pane>
5252

53-
<ion-content class="has-header" scroll="false">
53+
<ion-scroll class="has-header" direction="xy" style="width:100%;height:50%;">
5454
<h3>Hourly Forecast</h3>
55-
<ion-scroll direction="x" style="width: 100%; height: 20%;">
5655
<div class="hours">
5756
<div ng-repeat="hour in hours">
5857
<div class="icons">
@@ -65,14 +64,57 @@ <h3>Hourly Forecast</h3>
6564
</div>
6665
</div>
6766
</div>
68-
</ion-scroll>
67+
<br/><p>...</p>
68+
<br/><p>...</p>
69+
<br/><p>...</p>
70+
<br/><p>...</p>
71+
<br/><p>...</p>
72+
<br/><p>...</p>
73+
<br/><p>...</p>
74+
<br/><p>...</p>
75+
<br/><p>...</p>
76+
<br/><p>...</p>
77+
<br/><p>...</p>
78+
<br/><p>...</p>
79+
<br/><p>...</p>
80+
<br/><p>...</p>
81+
<br/><p>...</p>
82+
<br/><p>...</p>
83+
<br/><p>...</p>
84+
<br/><p>...</p>
85+
<br/><p>...</p>
86+
<br/><p>...</p>
87+
<br/><p>...</p>
88+
<br/><p>...</p>
89+
<br/><p>...</p>
90+
<br/><p>...</p>
91+
<br/><p>...</p>
92+
<br/><p>...</p>
93+
<br/><p>...</p>
94+
<br/><p>...</p>
95+
<br/><p>...</p>
96+
<br/><p>...</p>
97+
<br/><p>...</p>
98+
<br/><p>...</p>
99+
<br/><p>...</p>
100+
<br/><p>...</p>
101+
<br/><p>...</p>
102+
<br/><p>...</p>
103+
<br/><p>...</p>
104+
<br/><p>...</p>
105+
<br/><p>...</p>
106+
<br/><p>...</p>
107+
<br/><p>...</p>
108+
<br/><p>...</p>
109+
<br/><p>...</p>
110+
<br/><p>...</p>
69111
<a class="button" ng-click="scrollTo()">
70112
Scroll to 100
71113
</a>
72114
<ion-scroll direction="y" style="height: 400px; width: 300px; background: red;">
73115
<div style="width: 100px; height: 4000px; background: url('tree_bark.png') repeat"></div>
74116
</ion-scroll>
75-
</ion-content>
117+
</ion-scroll>
76118
</ion-pane>
77119

78120
<script>

0 commit comments

Comments
 (0)