ionic content not scrolling

Asked 14/5, 2016 at 19:29 Answered 26/6, 2024 at 4:34

Solved angularjs cordova ionic-framework visual-studio-cordova

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.

Violaceous answered 14/5, 2016 at 19:29 Comment(0)

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/

Estipulate answered 14/5, 2016 at 20:22 Comment(5)

Thanks. But still does not work. Is my environment missing something? – Violaceous 14/5, 2016 at 23:57

I have edited the response to contain a working codepen and the screenshot. – Estipulate 15/5, 2016 at 4:53

Something wrong with my environment. I recreated entire thing and now your solution works. I am having a mobile application where I see desktop like scroll bar. Do you know how to make it look like mobile scroll i.e. virtually invisible?? – Violaceous 16/5, 2016 at 17:4

Please post a screenshot – Estipulate 16/5, 2016 at 20:5

As of Ionic 1.3.3 this is what fixed my scroll issues. It would not scroll while the mouse pointer was over an ion-radio, on the browser. – Uppity 22/8, 2018 at 14:17

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

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

Actinomycete answered 11/10, 2017 at 12:14 Comment(1)

Seeing this on ionic v1.3.2 - suggested workaround appears to work. – Wheelbarrow 30/11, 2017 at 16:11

Sandy to hide the scrollbar try to add ::-webkit-scrollbar {display:none;} to your css file. It worked for me.

Overdrive answered 17/5, 2016 at 9:12 Comment(0)

in your parent container, use

height: 100dvh
display:flex
flex-direction: row/column;

after this the inner ion-content will fully scroll

Moonscape answered 26/6, 2024 at 4:34 Comment(0)

Recommended topics

Hot tags