Le défilement Vertical ne fonctionne pas dans Ionique

J'ai deux ion-scroll éléments sur ma page, tout en haut défile horizontalement, au-dessous est une liste qui devrait faire défiler l'écran verticalement.

Le problème est qu'il n'a pas. Il a juste rebondit vers le haut de la liste.

Exemple: http://codepen.io/CaffGeek/pen/LEVdVY

J'ai constaté que si j'ai mis un de la hauteur sur la verticale de l'ion de défilement, il "fonctionne", mais cela doit fonctionner sur de multiples appareils et je ne sais pas quelle hauteur à utiliser. Je préfère ne pas avoir à regarder les événements, et de recalculer la hauteur à chaque fois. Quelqu'un sait comment résoudre ce problème?

HTML

<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic List Scroll Bug</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<header class="bar bar-header bar-positive">
<h1 class="title">Ionic List Scroll Bug</h1>
</header>
<ion-content class="has-header">
<ion-scroll delegate-handle="calendarScroll" direction="x">
<div class="row">
<div class="col col-20" ng-repeat="day in payPeriod.days">
<div class="row">
<div class="col">{{day.name}}</div>
</div>
<div class="row">
<div class="col">{{day.number}}</div>
</div>
</div>
</div>
</ion-scroll>
<ion-scroll delegate-handle="taskScroll" direction="y">
<ul class="list">
<li class="list-item" ng-repeat="task in tasks">
<div class="row">
<div class="col col-80">
<p>{{task.name}}</p>
</div>
<div class="col col-20">
<label class="item item-input">
<input type="text" placeholder="Hours" ng-value="task.time" />
</label>
</div>
</div>
</li>
</ul>
</ion-scroll>
</ion-content>
<ion-footer-bar align-title="right" class="bar-stable">
<div class="buttons">
<button class="button">Save</button>
</div>
<h1 class="title">Total hours 0.00</h1>
</ion-footer-bar>
</body>
</html>

JavaScript

angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.payPeriod = {
days: [{ name: 'Mon', number: 3 }, { name: 'Tue', number: 4 }, { name: 'Wed', number: 5 },
{ name: 'Thu', number: 6 }, { name: 'Fri', number: 7 }, { name: 'Sat', number: 8 }, { name: 'Sun', number: 9 }]
};
$scope.tasks = [
{name: 'task 1', time: 1.0 },
{name: 'task 2', time: 3.0 },
{name: 'task 3', time: 2.0 },
{name: 'task 4', time: 1.0 },
{name: 'task 5', time: 2.0 },
{name: 'task 6', time: 1.0 },
{name: 'task 7', time: 1.0 },
{name: 'task 8', time: 2.0 },
{name: 'task 9', time: 1.0 },
{name: 'task 0', time: 1.0 }
];
});
L'utilisation d'une densité unité indépendante comme un vh unité, ou à la portée de tout autour de la racine de la taille de la police et de l'utilisation rem. Malheureusement, c'est juste la façon dont ion-scroll œuvres. Il a besoin d'une hauteur définie pour exécuter ses calculs, sinon ça devient un NaN et le calcul de 0
sérieusement...c'est quoi l'neg voix sur une question, qui est demandé, répondit, et pas marqué?

OriginalL'auteur CaffGeek | 2014-11-26

  1. 14

    Voici une solution simple:

    Codepen illustrant une solution simple

    Voici la viande de ce que nous faisons:

    ion-scroll[direction=x] {
width: 100vw;
}
ion-scroll[direction=y] {
height: 100vh;
}

    Qui permettra à votre rouleaux à fonctionner comme prévu dans votre Ionique de l'application (et, en fait, c'est ce que je fais dans la mine dans le cadre de la CSS standard).

    GIF: en action sur CodePen

    Le défilement Vertical ne fonctionne pas dans Ionique

    c'est peut-être moi, mais qui ne semble pas être de travail (au moins pas dans google Chrome)
    Ce n'est pas de travail pour vous? Dans quel environnement est-il pas de travail?
    J'ai rechargé la page, et c'est le défilement maintenant, mais pas réellement de défilement vers le dernier élément de la liste. Je pense que c'est parce que 100vh ne prend pas en compte la taille de l'en-tête, pied de page ou horizontale de la zone de défilement. Ce qui revient à la question d'avoir à recalculer la taille.
    Pour quiconque essaie ceci: Être conscient que cela ne fonctionne pas sur certaines versions d'Android, car le navigateur ne prend pas en charge fenêtre d'affichage unités: caniuse.com/#feat=viewport-units
    A fonctionné pour moi, merci!

    OriginalL'auteur Josh Burgess

  2. 2

    Hybride travail autour pour vous d'essayer:

    C'est peut-être pas la meilleure solution, mais au moins permet de faire défiler l'écran, pour vous d'essayer, si vous le souhaitez:

    Juste envelopper l'ensemble de votre contenu de la page dans un <div> avec position absolue et de définir si de défilement y et/ou x:

    <div style='position:absolute; top:0; right:0; bottom:0; left:0; overflow-y:scroll; overflow-x: hidden'>
<!-- your content of page here .... -->
</div>

    A fonctionné pour moi. La compatibilité des navigateurs sur Windows 10, à l'aide ionique-package pour Meteor JS (sans Angular JS):

    🙂 affiche la barre de défilement sur:
    - FireFox
    - Windows 10 Bord
    - MS IE 11

    🙁 Ne pas afficher la barre de défilement, mais il parchemins:
    - Safari
    - Chrome
    - Opéra

    Espère que cela aide un peu pour certains cas.

    OriginalL'auteur Juergen Fink