«ион-прокрутка» - невозможно прокручивать по вертикали

Я написал код для горизонтального слайдера изображения, используя ion-scroll. Он работает правильно. Но я хочу, чтобы моя страница также была прокручиваемой по вертикали.
Я не могу прокрутить всю страницу, прокручивая содержимое внутри <ion-scroll> (обозначенная область на изображении). Но я могу прокручивать страницу, прокручивая за пределами отмеченной области. Если я изменю direction="xy", тогда я могу прокручивать только содержимое <ion-scroll>.«ион-прокрутка» - невозможно прокручивать по вертикали

<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>

источник

2015-08-19 Sariban D' Cl

Так это было долго стоять вопрос, есть ли способ, чтобы заставить его работать, но это много кода: я собираюсь отправить его здесь и дать ссылку на 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);

источник

2015-08-19 15:20:55

Спасибо :). Много кода, который мне нужно добавить. –

Одно сомнение. Почему коды ниже '// Scroll fix directive' используются? Без этой части она также работает –

«ион-прокрутка» - невозможно прокручивать по вертикали

ответ

Смежные вопросы