ionic content not scrolling

angularjs cordova ionic-framework visual-studio-cordova

31,296

Solution 1

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/

Solution 2

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.

Solution 3

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

31,296

Author by

Sandy

Enthusiast in technology world and fascinated by new entrepreneurs. Strongly believe in innovation and creativity and looking forward to be a part of it.

Updated on July 09, 2022

Comments

Sandy almost 2 years

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.

Sandy about 8 years

Thanks. But still does not work. Is my environment missing something?
Aditya Singh about 8 years

I have edited the response to contain a working codepen and the screenshot.
Sandy about 8 years

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??
Aditya Singh about 8 years

Please post a screenshot
David Victor over 6 years

Seeing this on ionic v1.3.2 - suggested workaround appears to work.
Frank almost 6 years

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.