2016-05-14 13 views
2

私は多くの答えを見てきましたが、何も私のために働いていませんでした。私はシンプルな.htmlファイルを持っていて、イオンコンテンツはスクロールしません。イオン性内容がスクロールしない

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

上記のうち、$scope.itemsが一部のWebサービスから取得されています。すべてがうまくレンダリングされますが、スクロールしません。 私はVisual studio 'Ionic Blank Template'を使用しています。私はCordovaを正しく設定し、すべてのソリューションを正常に動作させるだけで正常に動作します。

答えて

12

divコンテナからclass="scroll"を削除し、scroll="true"ion-contentから削除し、overflow-scroll="true"を追加します。必要なクラスは要素上にイオンで追加されます。クロムシミュレータでスクロール可能なリストを示すcodepen:http://codepen.io/addi90/full/RaOegM/

Ionic scrollable list

+0

ありがとうございました。しかし、まだ動作しません。私の環境は何か不足していますか? – Sandy

+0

私は、動作中のcodepenとスクリーンショットを含むレスポンスを編集しました。 –

+0

私の環境に何か問題があります。私は全体を再作成し、今あなたのソリューションは動作します。私はスクロールバーのようなデスクトップが見えるモバイルアプリケーションを持っています。モバイルスクロールのように見えるようにする方法を知っていますか? – Sandy

1

サンディスクロールバーを非表示にするには、あなたのCSSに::-webkit-scrollbar {display:none;}を追加しようとあなたは明示的に

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

アップデートを追加する必要はありませんファイル。それは私のために働いた。

2

ionic v1.3.3以降では、スクロールが機能しません。これは役立つのオーバーフロースクロール= "false" に置くか、

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

OR

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

として定義することによって解決することができます。

+0

これをionic v1.3.2で見る - 推奨される回避策が動作するようです。 –

関連する問題