I have two ion-scroll elements on my page, the top one scrolls horizontally, below it is a list that should scroll vertically.
我的页面上有两个离子滚动元素，顶部有一个水平滚动，下面是一个应该垂直滚动的列表。
The problem is it doesn't. It just bounces back to the top of the list.
问题是它没有。它只是反弹到列表的顶部。
Example: http://codepen.io/CaffGeek/pen/LEVdVY
示例：http：//codepen.io/CaffGeek/pen/LEVdVY
I have found that if I set a height on the vertical ion-scroll it 'works' but this needs to work on multiple devices and I don't know what height to use. I'd prefer to not have to watch events, and recalculate the height each time. Anybody know how to fix this?
我发现如果我在垂直离子滚动上设置一个高度它“有效”，但这需要在多个设备上工作，我不知道要使用多少高度。我宁愿不必看事件，每次重新计算高度。有谁知道如何解决这个问题？
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 }
];
});
2 个解决方案
#1
14
Here's a simple solution:
这是一个简单的解决方案：
Codepen illustrating a simple fix
Here's the meat of what we're doing:
这是我们正在做的事情：
ion-scroll[direction=x] {
width: 100vw;
}
ion-scroll[direction=y] {
height: 100vh;
}
That will allow your scrolls to work as expected in your Ionic app (and, in fact, this is what I do in mine as part of the CSS boilerplate).
这将允许您的卷轴在您的Ionic应用程序中按预期工作（事实上，这是我在我的工作中作为CSS样板的一部分）。
GIF: in action on CodePen
#2
2
Hybrid work-around for you to try:
混合解决方案让您尝试：
Maybe it's not the best solution, but at least allows for scrolling, for you to try, if you like:
也许它不是最好的解决方案，但至少允许滚动，如果您愿意，可以试试：
Just wrap your whole page content into a <div> with absolute position and define whether to scroll y and/or 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>
Worked for me. Browsers compatibility on Windows 10, using ionic-package for Meteor JS (without Angular JS):
为我工作。 Windows 10上的浏览器兼容性，使用离子包为Meteor JS（没有Angular JS）：
:-) shows scrollbar on: - FireFox - Windows 10 Edge - MS IE 11
:-)显示滚动条： - FireFox - Windows 10 Edge - MS IE 11
:-( Does not show scrollbar, but it scrolls: - Safari - Chrome - Opera
:-(不显示滚动条，但它滚动： - Safari - Chrome - Opera
Hope this helps a bit for some cases.
希望这对某些情况有所帮助。
#1
14
Here's a simple solution:
这是一个简单的解决方案：
Codepen illustrating a simple fix
Here's the meat of what we're doing:
这是我们正在做的事情：
ion-scroll[direction=x] {
width: 100vw;
}
ion-scroll[direction=y] {
height: 100vh;
}
That will allow your scrolls to work as expected in your Ionic app (and, in fact, this is what I do in mine as part of the CSS boilerplate).
这将允许您的卷轴在您的Ionic应用程序中按预期工作（事实上，这是我在我的工作中作为CSS样板的一部分）。
GIF: in action on CodePen
#2
2
Hybrid work-around for you to try:
混合解决方案让您尝试：
Maybe it's not the best solution, but at least allows for scrolling, for you to try, if you like:
也许它不是最好的解决方案，但至少允许滚动，如果您愿意，可以试试：
Just wrap your whole page content into a <div> with absolute position and define whether to scroll y and/or 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>
Worked for me. Browsers compatibility on Windows 10, using ionic-package for Meteor JS (without Angular JS):
为我工作。 Windows 10上的浏览器兼容性，使用离子包为Meteor JS（没有Angular JS）：
:-) shows scrollbar on: - FireFox - Windows 10 Edge - MS IE 11
:-)显示滚动条： - FireFox - Windows 10 Edge - MS IE 11
:-( Does not show scrollbar, but it scrolls: - Safari - Chrome - Opera
:-(不显示滚动条，但它滚动： - Safari - Chrome - Opera
Hope this helps a bit for some cases.
希望这对某些情况有所帮助。