ionic Inhalt nicht scrollen

Habe ich schon viele Antworten, aber nichts für mich gearbeitet. Ich habe eine einfache .html-Datei und Ionischen Inhalte einfach nicht scrollen.

<!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>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" >
    -->
    <script src="js/platformOverrides.js"></script>

    <script src="scripts/angular-resource.min.js"></script>
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/angular-sanitize.min.js"></script>
    <script src="scripts/angular-ui-router.js"></script>
    <script src="scripts/angular-resource.js"></script>
    <script src="scripts/lodash.min.js"></script>

    <script src="js/app.js"></script>
    <script src="js/appController.js"></script>
</head>
<body ng-app="app" ng-controller="appController">
    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">Ionic Blank Starter</h1>
        </ion-header-bar>
        <ion-view>
            <ion-content scroll="true">
                <div class="scroll">
                    <a ng-repeat="item in items" class="item" href="#">
                        <h2>{{item.name}}</h2>
                    </a>
                </div>
            </ion-content>
        </ion-view>
    </ion-pane>
</body>
</html>

Oben $scope.items heruntergeladen wird von einigen webservice. Alles macht gut, aber es funktioniert einfach nicht scrollen.
Ich benutze Visual studio 'Ionischen Leeren Vorlage", wenn diese Angelegenheiten. Ich habe konfiguriert Cordova richtig und der rest alle Lösungen, die einfach funktionieren.

InformationsquelleAutor Sandy | 2016-05-14

  1. 14

    Entfernen Sie die class="scroll" von der div-container scroll="true" aus ion-content und fügen Sie overflow-scroll="true" . Die benötigten Klassen werden Hinzugefügt durch die Ionische auf die Elemente. Sie nicht brauchen, um hinzuzufügen, dass explizit

    <ion-view>
   <ion-content overflow-scroll="true">
        <div class="list">
            <a ng-repeat="item in items" class="item" href="#">
                <h2>{{item.name}}</h2>
            </a>
        </div>
    </ion-content>
</ion-view>

    Update: Der codepen zeigt eine scrollbare Liste in Chrom-simulator: http://codepen.io/addi90/full/RaOegM/

    ionic Inhalt nicht scrollen

    Danke. Aber funktioniert immer noch nicht. Ist meine Umgebung etwas fehlt?
    Ich bearbeitet haben, die Antwort zu enthalten, die Arbeit codepen und den screenshot.
    Etwas falsch mit meiner Umwelt. Ich nachgebaut ganze Sache und nun Ihre Lösung funktioniert. Ich bin eine mobile Anwendung, wo ich sehe, desktop-ähnliche scroll-bar. Wissen Sie, wie Sie machen es so Aussehen, wie mobile scrollen also quasi unsichtbar??
    Poste bitte einen screenshot
    Als Ionischer 1.3.3 das ist, was meine Feste scroll-Probleme. Es würde nicht Blättern, während der Mauszeiger sich über einem ion-radio, auf dem browser.

    InformationsquelleAutor Aditya Singh

  2. 3

    In ionic v1.3.3 oder höher, Blättern nicht funktioniert. dies kann gelöst werden, indem overflow-scroll="false" oder eine Definition als 

        <ion-content overflow-scroll="false">

    ODER

        <ion-scroll scrollX="true" scrollY="true" style="margin:17rem; position:fixed; display:inline; top:0; right:0; bottom:0; left:0; white-space: nowrap;">

    helfen.

    Sehen Sie dieses on ionic v1.3.2 - workaround scheint zu funktionieren.

    InformationsquelleAutor Atif Hussain

  3. 1

    Sandy zu verstecken der scrollbar hinzuzufügen versuchen ::-webkit-scrollbar {display:none;} zu Ihrer css-Datei. Es funktionierte für mich.

    InformationsquelleAutor Ângelo Martins

Schreibe einen Kommentar