My app has a menu of clickable elements.. I can scroll it by swiping the area, but now trying to add some buttons that scroll this ionic element as well..
Problems
I click down on the #down
button , and nothing happens.
Also, my bottom button isn't visible at all.
<button style="width: 100%;margin-top:25px;" id="down" ng-click="scrollDown()" ng-if="isEnabled" aria-label="double tap to scroll down">Scroll Down
</button>
<ion-scroll delegate-handle="myScroll" scrollbar-x="true" scrollbar-y="false" direction="y" has-bouncing="false" style="overflow: scroll; overflow-x: hidden;">
<div id="content" style="display:inline-block;">
<div>
... //Tons of scrollable stuff
</div>
</ion-scroll>
<button id="up" style="width: 100%" ng-click="scrollUp()" ng-if="isEnabled" aria-label="double tap to scroll up">Scroll Up
</button>
The Controller
function calculateTopBottom() {
var currentTop = $ionicScrollDelegate.$getByHandle('myScroll').getScrollPosition().top;
var maxTop = $ionicScrollDelegate.$getByHandle('myScroll').getScrollView().__maxScrollTop;
if (currentTop == 0) {
$('#down').attr('aria-label','double tap to scroll down');
$('#up').attr('aria-label','Reached top');
} else if (currentTop >= maxTop) {
$('#down').attr('aria-label','Reached bottom');
$('#up').attr('aria-label','double tap to scroll up');
} else {
$('#down').attr('aria-label','double tap to scroll down');
$('#up').attr('aria-label','double tap to scroll up');
}
}
$scope.scrollDown = function () {
$ionicScrollDelegate.$getByHandle('myScroll').scrollBy(0, 150);
$timeout(function () {
calculateTopBottom();
}, 200);
};
$scope.scrollUp = function () {
$ionicScrollDelegate.$getByHandle('myScroll').scrollBy(0, -150);
$timeout(function () {
calculateTopBottom();
}, 200);
};