ионный свиток не прокручивает по вертикали

поэтому я добавил 2 ионных прокрутки на своей странице. Пример кода: http://codepen.io/anon/pen/QNNExR ионный свиток не прокручивает по вертикали

первый ионный свиток работает правильно, я могу прокручивать влево-вправо.

для второго ионного прокрутки, где есть множество «тестовых» абзацев. Я не могу прокрутить вертикально (сверху вниз). Он всегда отскакивает назад, когда я набираю немного больше высоты экрана.

примечание: я не установил высоту для ионного прокрутки или содержимого внутри ионного прокрутки, так как высота не фиксирована (например, высота ионной прокрутки зависит от размера экрана, должна заполнять остальную высоту и содержание экрана высота зависит от длины содержимого)

что я сделал не так? Благодарю.

<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 vertical and horizontal Scroll</title> 

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 

    </head> 
    <body ng-controller="MyCtrl"> 

    <ion-header-bar class="bar-positive"> 
     <h1 class="title">Ionic vertical and horizontal Scroll</h1> 
    </ion-header-bar> 

<ion-pane> 
    <ion-content> 
<div> 
      <ion-scroll zooming="false" direction="x" scrollbar-x="false" scrollbar-y="false" has-bouncing="true" style="width: 100%;"> 
      123 
      </ion-scroll> 
    </div> 

<div> 
<ion-scroll zooming="false" direction="y" style="width: 100%; height: 100%"> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
</ion-scroll> 
</div> 
    </ion-content> 
</ion-pane> 

    </body> 
</html>

источник

2016-03-08 innek

-1

добавил это в вашем контроллере с $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); 
    });

источник

2016-08-28 11:36:17

Так что же это сделать? Проводка только кода, как правило, не все, что полезно; сообщение * информация * обычно есть! – Carpetsmoker

добавьте этот код в свой контроллер, ионный разработчик знает это –

Это не объяснение. – Carpetsmoker

ионный свиток не прокручивает по вертикали

ответ

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