ionic ion-scroll scroll parent page

Question

I am developing an app that looks like this:http://codepen.io/anon/pen/vNOVvb

I am using ion-scroll to do horizontal scroll for the list of images. ion-scroll works fine as what I wanted. But the problem is user can't do vertical scroll to the full page when dragging on the ion-scroll.

How can I get the parent page vertical scroll works on ion-scroll?

My sample code as on codepen.io:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <!-- ionic/angularjs js -->
    <link href="http://code.ionicframework.com/1.1.0/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.js"></script>

    <!-- your app's js -->
    <!--<script src="js/app.js"></script>
    <script src="js/controllers.js"></script>-->
  </head>
  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>

    <!-- MENU Template -->
    <script id="templates/menu.html" type="text/ng-template">
      <ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close href="#/app/content1">
          Content 1
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

    </script>


     <!-- Content1 Template -->
    <script id="templates/content1.html" type="text/ng-template">
      <ion-view view-title="Content 1">
  <ion-content>
    <ion-item>
      <div class="item-text-wrap mytitle">Title 1</div>  
      <ion-scroll direction="x" zooming="false">
          <div>
            <a class="foodImage" href="#"><div style="background-image: url(http://lorempixel.com/200/200/food?1)">     </div></a>
                <a class="foodImage" href="#">      <div style="background-image: url(http://lorempixel.com/200/200/food?2)"></div></a>
            <a class="foodImage" href="#">      <div style="background-image: url(http://lorempixel.com/200/200/food?3)"></div></a>
            <a class="foodImage" href="#">      <div style="background-image: url(http://lorempixel.com/200/200/food?4)"></div></a>
            <a class="foodImage" href="#">      <div style="background-image: url(http://lorempixel.com/200/200/food?5)"></div></a>
            <a class="foodImage" href="#">      <div style="background-image: url(http://lorempixel.com/200/200/food?6)"></div></a>
            <a class="foodImage" href="#">      <div style="background-image: url(http://lorempixel.com/200/200/food?7)"></div></a>
        </div>
      </ion-scroll>

      <div class="item-text-wrap mytitle">Title 2</div>  
      <ion-scroll direction="x" zooming="false">
          <div>
            <a class="foodImage" href="#"><div style="background-image: url(http://lorempixel.com/200/200/food?1)">     </div></a>
                <a class="foodImage" href="#">      <div style="background-image: url(http://lorempixel.com/200/200/food?2)"></div></a>
            <a class="foodImage" href="#">      <div style="background-image: url(http://lorempixel.com/200/200/food?3)"></div></a>
            <a class="foodImage" href="#">      <div style="background-image: url(http://lorempixel.com/200/200/food?4)"></div></a>
            <a class="foodImage" href="#">      <div style="background-image: url(http://lorempixel.com/200/200/food?5)"></div></a>
            <a class="foodImage" href="#">      <div style="background-image: url(http://lorempixel.com/200/200/food?6)"></div></a>
            <a class="foodImage" href="#">      <div style="background-image: url(http://lorempixel.com/200/200/food?7)"></div></a>
        </div>
      </ion-scroll>

      <div class="item-text-wrap mytitle">Title 3</div>  
      <ion-scroll direction="x" zooming="false">
          <div>
            <a class="foodImage" href="#"><div style="background-image: url(http://lorempixel.com/200/200/food?1)">     </div></a>
                <a class="foodImage" href="#">      <div style="background-image: url(http://lorempixel.com/200/200/food?2)"></div></a>
            <a class="foodImage" href="#">      <div style="background-image: url(http://lorempixel.com/200/200/food?3)"></div></a>
            <a class="foodImage" href="#">      <div style="background-image: url(http://lorempixel.com/200/200/food?4)"></div></a>
            <a class="foodImage" href="#">      <div style="background-image: url(http://lorempixel.com/200/200/food?5)"></div></a>
            <a class="foodImage" href="#">      <div style="background-image: url(http://lorempixel.com/200/200/food?6)"></div></a>
            <a class="foodImage" href="#">      <div style="background-image: url(http://lorempixel.com/200/200/food?7)"></div></a>
        </div>
      </ion-scroll>
    </ion-item>
  </ion-content>
</ion-view>
    </script>



  </body>
</html>

CSS file

.mytitle{
  margin-top:20px;
  margin-bottom:20px;
}
.foodImage {
        margin-right:10px;
}

.foodImage div{
            display: inline-block;
            width:200px;
            height: 200px;
}
.foodImage div img{
                height: 100%;
                width: 100%;
            }

Javascript:

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

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    //controller: 'AppCtrl'
  })

  .state('app.content1', {
      url: '/content1',
      views: {
        'menuContent': {
          templateUrl: 'templates/content1.html'
        }
      }
    })


  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/content1');
});

see if this helps you codepen.io/rajeshwarpatlolla/pen/xGWBja — Mudasser Ajaz
@mudasserajaz Thanks a lot for the link. Tried with it. It only works on iphone, but not on android. Also, it is frequently run into error: Uncaught TypeError: Cannot read property 'apply' of undefined sv.mouseMove @ VM24752:12 — user1995781

Abdul Nasir B A Abdul Nasir B A · Accepted Answer · 2016-08-28T11:39:43

Just Add this piece of code in your controller.

.controller('sampleviewctrl')

inject this two library in your controller $timeout, $ionicScrollDelegate

$timeout(function(){                                
    var sv = $ionicScrollDelegate.$getByHandle('horizontal').getScrollView();

    var container = sv.__container;

    var originaltouchStart = sv.touchStart;
    var originalmouseDown = sv.mouseDown;
    var originaltouchMove = sv.touchMove;
    var originalmouseMove = sv.mouseMove;

    container.removeEventListener('touchstart', sv.touchStart);
    container.removeEventListener('mousedown', sv.mouseDown);
    document.removeEventListener('touchmove', sv.touchMove);
    document.removeEventListener('mousemove', sv.mousemove);


    sv.touchStart = function(e) {
    e.preventDefault = function(){}
    originaltouchStart.apply(sv, [e]);
    }

    sv.touchMove = function(e) {
    e.preventDefault = function(){}
    originaltouchMove.apply(sv, [e]);
    }

    sv.mouseDown = function(e) {
    e.preventDefault = function(){}
    originalmouseDown.apply(sv, [e]);
    }

    sv.mouseMove = function(e) {
    e.preventDefault = function(){}
    originalmouseMove.apply(sv, [e]);
    }

    container.addEventListener("touchstart", sv.touchStart, false);
    container.addEventListener("mousedown", sv.mouseDown, false);
    document.addEventListener("touchmove", sv.touchMove, false);
    document.addEventListener("mousemove", sv.mouseMove, false);
});

Html Page should be like this

<ion-scroll  has-bouncing="false" direction="x" zooming="false" delegate-handle="horizontal">

ionic ion-scroll scroll parent page

1 Answers