【问题标题】：Vertical scrolling not working in Ionic垂直滚动在 Ionic 中不起作用
【发布时间】：2015-09-10 02:17:59
【问题描述】：

我的页面上有两个ion-scroll 元素，顶部是水平滚动的，下面是一个应该垂直滚动的列表。

问题是它没有。它只是弹回列表的顶部。

示例：http://codepen.io/CaffGeek/pen/LEVdVY

我发现，如果我在垂直离子卷轴上设置一个高度，它“工作”，但这需要在多个设备上工作，我不知道要使用什么高度。我宁愿不必观看事件，并且每次都重新计算高度。有人知道如何解决这个问题吗？

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 }
  ];
});

【问题讨论】：

然后使用与密度无关的单位，例如 vh 单位，或者将所有内容限定在根字体大小周围并使用 rem。不幸的是，这就是ion-scroll 的工作方式。它需要一个定义的高度才能运行它的计算，否则它会得到一个 NaN 并从 0 进行计算
说真的...对一个被问、被回答、未被标记的问题投反对票是怎么回事？

标签： javascript css ionic-framework

【解决方案1】：

这是一个简单的解决方案：

Codepen illustrating a simple fix

这是我们正在做的事情的实质：

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

这将使您的滚动在您的 Ionic 应用程序中按预期工作（事实上，这就是我在我的 CSS 样板文件中所做的）。

GIF：在 CodePen 上运行

【讨论】：

也许是我，但这似乎不起作用（至少在 Chrome 中不起作用）
@CaffGeek – 什么不适合你？它在什么环境下不工作？
我重新加载了页面，它现在正在滚动，但实际上并没有滚动到列表中的最后一项。我认为这是因为 100vh 没有考虑页眉、页脚或水平滚动区域的大小。这又回到了必须重新计算大小的问题。
@CaffGeek – 好的，我会为你完成剩下的工作。
对于任何尝试此操作的人：请注意，由于浏览器不支持视口单元，这在某些 Android 版本上不起作用：caniuse.com/#feat=viewport-units

【解决方案2】：

混合解决方法供您尝试：

也许这不是最好的解决方案，但至少允许滚动，如果您愿意，可以尝试：

只需将整个页面内容包装成具有绝对位置的<div> 并定义是否滚动 y 和/或 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>

为我工作。 Windows 10 上的浏览器兼容性，使用 Meteor JS 的 ionic-package（无 Angular JS）：

:-) 在上显示滚动条： - 火狐 - Windows 10 边缘 - MS IE 11

:-( 不显示滚动条，但会滚动： - 苹果浏览器 - 铬合金 - 歌剧

希望这对某些情况有所帮助。

【讨论】：