I have an app that is used on mobile devices. I have a simple horizontal scroll along with some text. If the user swipes up or down outside of the horizontal scroller, the page slides up and down. However, when the user gestures up or down with their finger inside the horizontal scroller, the page does not slide up or down. I would like for it to slide up or down. Here is a codepen below.
Here is the code.
<ion-scroll direction="x" class="wide-as-needed">
<a class="button inline-button">this is a button : 1</a>
<a class="button">this is a button : 2</a>
<a class="button">this is a button : 3</a>
<a class="button">this is a button : 4</a>
<a class="button">this is a button : 5</a>
<a class="button">this is a button : 6</a>
<a class="button">this is a button : 7</a>
<a class="button">this is a button : 8</a>
<a class="button">this is a button : 9</a>
<a class="button">this is a button : 10</a>
<a class="button">this is a button : 11</a>
<a class="button">this is a button : 12</a>
<a class="button">this is a button : 13</a>
<a class="button">this is a button : 14</a>
<a class="button">this is a button : 15</a>
<a class="button">this is a button : 16</a>
</ion-scroll>
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
CSS
.wide-as-needed {
overflow: scroll;
white-space: nowrap;
}
.scroll {
min-width: 100%;
}
You should just be able to add overflow-scroll="true" to your <ion-content></ion-content> tags so it will look like this:
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Modal</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Hello!</h1>
</ion-header-bar>
<ion-header-bar class="bar-subheader">
</ion-header-bar>
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
Loading...
</div>
<ion-content overflow-scroll="true" ng-class="{'has-loading': data.isLoading}">
<ion-scroll direction="x" class="wide-as-needed">
<a class="button inline-button">this is a button : 1</a>
<a class="button">this is a button : 2</a>
<a class="button">this is a button : 3</a>
<a class="button">this is a button : 4</a>
<a class="button">this is a button : 5</a>
<a class="button">this is a button : 6</a>
<a class="button">this is a button : 7</a>
<a class="button">this is a button : 8</a>
<a class="button">this is a button : 9</a>
<a class="button">this is a button : 10</a>
<a class="button">this is a button : 11</a>
<a class="button">this is a button : 12</a>
<a class="button">this is a button : 13</a>
<a class="button">this is a button : 14</a>
<a class="button">this is a button : 15</a>
<a class="button">this is a button : 16</a>
</ion-scroll>
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
</ion-content>
</body>
</html>
EDIT
possible found a better more functional solution, it is a lot of code though so please see http://codepen.io/rajeshwarpatlolla/pen/xGWBja