ionischen Inhalt nicht scrollen

Ich habe viele Antworten durch, aber nichts hat für mich gearbeitet. Ich habe eine einfache HTML-Datei und ionischer Inhalt scrollt einfach nicht.ionischen Inhalt 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" rel="stylesheet"> 
    --> 
    <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 wird von einem Webservice abgerufen. Alles ist in Ordnung, aber es scrollt einfach nicht. Ich verwende Visual Studio 'Ionic Blank Template', wenn das wichtig ist. Ich habe Cordova richtig konfiguriert und Ruhe alle Lösungen funktionieren einfach gut.

Quelle

2016-05-14 Sandy

Entfernen Sie die class="scroll" aus dem div-Container, scroll="true" von ion-content und fügen Sie overflow-scroll="true" hinzu. Die erforderlichen Klassen werden durch ionische Elemente hinzugefügt. Sie brauchen nicht die 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 hinzufügen: Die codepen der scrollbaren Liste in Chrom-Simulator zeigt: http://codepen.io/addi90/full/RaOegM/

Quelle

2016-05-14 20:22:12

Danke. Aber immer noch nicht funktioniert. Fehlt meiner Umgebung etwas? – Sandy

Ich habe die Antwort bearbeitet, um einen funktionierenden Codepen und den Screenshot zu enthalten. –

Etwas stimmt nicht mit meiner Umgebung. Ich habe das Ganze neu erstellt und jetzt funktioniert deine Lösung. Ich habe eine mobile Anwendung, in der ich eine Desktop-ähnliche Bildlaufleiste sehe. Weißt du, wie man es wie eine mobile Schriftrolle aussieht, also praktisch unsichtbar? – Sandy

Sandy die Scrollbar zu verbergen versuchen ::-webkit-scrollbar {display:none;} zu Ihrem CSS hinzufügen Datei. Es hat für mich funktioniert.

Quelle

2016-05-17 09:12:10

In ionic v1.3.3 oder höher funktioniert das Scrollen auf nicht. Dies kann durch Überlauf-scroll = "false" in oder definiert, wie

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

<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 gelöst werden.

Quelle

2017-10-11 12:14:34

Sehen Sie dies auf ionic v1.3.2 - vorgeschlagene Abhilfe scheint zu funktionieren. –

ionischen Inhalt nicht scrollen

Antwort

Verwandte Themen