離子含量不滾動

我已經經歷了許多答案，但沒有爲我工作。我有一個簡單的.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'離子空白模板'。我已經正確配置了科爾多瓦，並將所有的解決方案都正常工作。

來源

2016-05-14 Sandy

從div容器中刪除class="scroll"，從ion-content中刪除scroll="true"並添加overflow-scroll="true"。所需的類將通過離子添加到元素上。你並不需要添加明確

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

更新：codepen顯示鉻模擬器的滾動列表：http://codepen.io/addi90/full/RaOegM/

來源

2016-05-14 20:22:12

謝謝。但仍然不起作用。我的環境錯過了什麼嗎？ – Sandy

我編輯了包含有效的codepen和截圖的響應。 –

我的環境有問題。我重新創建了所有的東西，現在你的解決方案可以工我有一個移動應用程序，我看到像滾動條一樣的桌面。你知道如何使它看起來像移動滾動，即幾乎不可見？ – Sandy

桑迪隱藏滾動條嘗試添加::-webkit-scrollbar {display:none;}到你的CSS文件。它爲我工作。

來源

2016-05-17 09:12:10

在ion v1.3.3或更高版本中，滾動不起作用。這可以通過將溢出滾動= 「假」的，或定義爲

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

會幫助解決。

來源

2017-10-11 12:14:34

看到這在離子v1.3.2 - 建議的解決方法似乎工作。 –

離子含量不滾動

回答

相關問題