CODEWITHSUNDEEP
javascriptangularjsionic-framework
Sariban D'Cl
Sariban D'Cl

Reputation: 2227

"ion-scroll" - not able to scroll vertically

I have written code for horizontal image slider using ion-scroll. It is working properly. But I want my page should be scrollable vertically also.
I can't scroll the whole page by swiping on the contents inside the <ion-scroll> (marked area in image). But I can scroll the page by swiping outside that marked area. If I change the direction="xy" then I can scroll inside the <ion-scroll> contents only.

<ion-content>      
<ion-scroll zooming="false" direction="x" style="width: 100%;">
<div style="width: {{albumDetail.sliderWidth}}; repeat">
  <span ng-repeat="list in albumDetail.lists">
    <a href="#/app/browse/albums/{{albumDetail.type}}/{{list.id}}"><button id="album-card" class="button button-light">
        <img width="140px" height="140px" src="{{list.albumArt}}"/>
        <p id="album-name-card">{{list.albumName}}</p>
      </button></a>
  </span>
</div>
</ion-scroll>
</ion-content>

enter image description here

Upvotes: 0

Views: 136

Answers (1)

Jess Patton
Jess Patton

Reputation: 2486

So this has been a long standing issue, there is a way to get it to work but it is a lot of code: i am going to post it here and give the link to a codepen

HTML:

    <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 Template</title>

    <link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js">
    </script>
  </head>
  <body ng-controller="MyCtrl">
       <ion-nav-view>

        <ion-view title="Check In Portugal by aptece">
  <ion-content class="padding" delegate-handle="mainScroll">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
  <ion-scroll direction="x" zooming="false" delegate-handle="horizontal" horizontal-scroll-fix="mainScroll">
  <p>Lorem ipsum dolor sit am consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae venim quos at minus eos optio dolore iure amet totam officia.<br/>Lorem ipsum dolor sit am consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae venim quos at minus eos optio dolore iure amet totam officia.</p>
  </ion-scroll>

    <ion-scroll direction="x" zooming="false" delegate-handle="horizontal2" horizontal-scroll-fix="mainScroll">
  <p>Lorem ipsum dolor sit am consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae venim quos at minus eos optio dolore iure amet totam officia.<br/>Lorem ipsum dolor sit am consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae venim quos at minus eos optio dolore iure amet totam officia.</p>
  </ion-scroll>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <img src="http://imgs.xkcd.com/comics/cloud.png" style="border: 0px; width:744px; height:233px; vertical-align: bottom;">
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos at minus eos optio dolore iure amet totam officia. </p>
    </ion-content>
        </ion-view>

        </ion-nav-view>
  </body>
</html>

CSS:

body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}

ion-scroll {
  width: 100%;
  font-size: 40px;
  height: auto;
  white-space: nowrap;
  padding: 10px;
  line-height: 40px;
}

JS:

angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope, $ionicScrollDelegate, $timeout) {
  $timeout(function(){
    //return false; // <--- comment this to "fix" the problem
    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);
  });
  $timeout(function(){
    //return false; // <--- comment this to "fix" the problem
    var sv = $ionicScrollDelegate.$getByHandle('horizontal2').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);
  });
});


// Scroll fix directive
(function() {
  var HorizontalScrollFix = (function() {
    function HorizontalScrollFix($timeout, $ionicScrollDelegate) {
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          var mainScrollID = attrs.horizontalScrollFix,
              scrollID = attrs.delegateHandle;

          var getEventTouches = function(e) {
            return e.touches && (e.touches.length ? e.touches : [
              {
                pageX: e.pageX,
                pageY: e.pageY
              }
            ]);
          };

          var fixHorizontalAndVerticalScroll = function() {
            var mainScroll, scroll;
            mainScroll = $ionicScrollDelegate.$getByHandle(mainScrollID).getScrollView();
            scroll = $ionicScrollDelegate.$getByHandle(scrollID).getScrollView();

            // patch touchstart
            scroll.__container.removeEventListener('touchstart', scroll.touchStart);
            scroll.touchStart = function(e) {
              var startY;
              scroll.startCoordinates = ionic.tap.pointerCoord(e);
              if (ionic.tap.ignoreScrollStart(e)) {
                return;
              }
              scroll.__isDown = true;
              if (ionic.tap.containsOrIsTextInput(e.target) || e.target.tagName === 'SELECT') {
                scroll.__hasStarted = false;
                return;
              }
              scroll.__isSelectable = true;
              scroll.__enableScrollY = true;
              scroll.__hasStarted = true;
              scroll.doTouchStart(getEventTouches(e), e.timeStamp);
              startY = mainScroll.__scrollTop;

              // below is our changes to this method
              // e.preventDefault();

              // lock main scroll if scrolling horizontal
              $timeout((function() {
                var animate, yMovement;
                yMovement = startY - mainScroll.__scrollTop;
                if (scroll.__isDragging && yMovement < 2.0 && yMovement > -2.0) {
                  mainScroll.__isTracking = false;
                  mainScroll.doTouchEnd();
                  animate = false;
                  return mainScroll.scrollTo(0, startY, animate);
                } else {
                  return scroll.doTouchEnd();
                }
              }), 100);
            };
            scroll.__container.addEventListener('touchstart', scroll.touchStart);
          };
          $timeout(function() { fixHorizontalAndVerticalScroll(); });          
        }
      };
    }

    return HorizontalScrollFix;

  })();

  angular.module('ionicApp').directive('horizontalScrollFix', ['$timeout', '$ionicScrollDelegate', HorizontalScrollFix]);

}).call(this);

Upvotes: 2

Related Questions