Menu
I have gone through many answers, but nothing worked for me. I have a simple .html file and ionic content just does not scroll.
<!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>
Above, $scope.items is being fetched from some webservice. Everything renders fine but it just does not scroll.
I am using Visual studio 'Ionic Blank Template' if that matters. I have configured Cordova correctly and rest all solutions just work fine.
825
In order to place elements outside of the scrollable area, slot="fixed" can be added to the element. This will absolutely position the element placing it in the top left.
Just want to add for future reference that in general, if you just want to scroll inside the ion-card-content, adding the overflow: scroll; on the ion-card-content element css (besides the display: flex; flex-direction: column; on the ion-card) works.
First step is to achieve the go to top button or scroll to top or bottom button is the scroll-events property of ion-content. This property allows ion-content to listen the scroll events like scroll-start, scroll-end and apply scroll methods to scroll the page to the particular position of the page.
Using ionScroll, ionScrollStart, ionScrollEnd for scrolling events and scrollToPoint () to scroll the content into a certain point. Scroll by a specified X/Y distance in the component. Scroll to the bottom of the component. Scroll to a specified X/Y location in the component. Scroll to the top of the component. The background of the content.
The scrollToPoint method takes three attributes X-axis, Y-axis and duration in ms. Now can easily navigate to the title by tapping the title button That's so by following above steps you can add scroll methods and events in Ionis application pages for implementing scroll functionalities.
Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the CSS Utilities or by individually styling it using CSS and the available CSS Custom Properties. In order to place elements outside of the scrollable area, slot="fixed" can be added to the element.
ionScrollStart: Emitted before the scroll is started. ionScrollEnd: Emitted when the scroll has ended. ionScroll: Emitted while scrolling. We can add these event triggers on the ion-content element as shown below and define the methods in the component class as shown below:
Remove the class="scroll" from the div container, scroll="true" from ion-content and add overflow-scroll="true" . The required classes will be added by ionic on the elements. You don't need to add that explicitly
<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>
Update: The codepen showing the scrollable list in chrome simulator: http://codepen.io/addi90/full/RaOegM/
154
In ionic v1.3.3 or later, scroll on is not working. this can be solved by placing overflow-scroll="false" in or defining as
<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;">
will help.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
