Horizontal ion-scroll not working

In the project that i am making i used ion-scroll two times and works perfect (vertical mode) but now i am trying to do an horizontal scroll and is not working, the scroll appear but i can't scroll nothing.

The HTML code is simple:

<ion-scroll direction="x" class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</ion-scroll>

and CSS:

.box {
    width: 60vw;
    height: 10vh;
    border: 1px solid black;
}

.box > * {
   display: inline-block;
   margin-right: 4vw;
   width: 20vw;
   height: 10vh;
   background: red;
}

Any suggestion? i am doing something wrong? i am missing something?

Thanks in advance

回答1:

View this codepen example, edit it and change it to your style.

angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', ['$scope', function($scope) {
  $scope.data = {
    isLoading: false
  };
  
  
}]);

.wide-as-needed {
  overflow: scroll;
  white-space: nowrap;
}
.scroll { 
  min-width: 100%;
}
.bar.bar-loading {
  display: block;
  height: 24px;
  
  /* starts right below a normal header */
  top: 44px;
  
  /* make the text centered vertically and horizontally */
  text-align: center;
  padding: 0;
  line-height: 24px;

  /* transition 'sliding down' (check below)*/
  -webkit-transition: 200ms all;
}


/* 
 * make the content's top changes animate.
 * might not always look good, but looks
 * good when our loader is added & removed
 */
.has-header {
  -webkit-transition: 200ms top;
}
.has-header.has-loading {
  /* 44px (header) + 24px */
  top: 68px;
}

/* make loading bar slide up/down */
.bar-loading.ng-enter,
.bar-loading.ng-leave.ng-leave-active {
  height: 0;
  border-width: 0px;
}
.bar-loading.ng-enter.ng-enter-active,
.bar-loading.ng-leave {
  height: 24px;
  border-width: 1px;
}

<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-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-header-bar>
    <div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
      Loading...
    </div>
    <ion-content ng-class="{'has-loading': data.isLoading}">
      <ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
    </ion-content>
    
  </body>
</html>

回答2:

I had the same problem- horizontal scroll worked fine on iOS but not at all on android. It seems this is a bug with ionic: https://github.com/driftyco/ionic-v1/issues/193 I'm using ionic 1.3.2, but it looks like it's still an issue in 2.x as well.

I was able to fix it by adding adding overflow-scroll="false" to the ion-scroll element.