CODEWITHSUNDEEP
javascriptjqueryangularjs
Julius Doan
Julius Doan

Reputation: 356

ngInfiniteScroll Scroll not triggering

I am trying to use the nginfiniteScroll from https://github.com/sroze/ngInfiniteScroll/tree/1.0.0. I am able to read it all but I am having some issues in triggering the scroll. When I create a container for the scroll box, the infinite scroll works fine. But when I remove it from a container, and just use a body I don't see it able to scroll. I created a plunkr of my code but it seems to work completely fine in the plunkr, which makes me really confused.

In my own code I have something like so

<style>#list-wrapper{
max-height: 400px;
overflow-y: scroll;

margin-top: 20px;
border: solid 1px black;
 }

 h4{
padding: 20px;
 }</style>

<div class="panel-content" data-ng-controller="DashboardCtrl">

<div>
    <div class="list" infinite-scroll='loadMore()'
         infinite-scroll-distance='2'>
        <div class="header">
        </div>
        <div class="list-table">
            <table class="table">
                <tbody>
                    <tr ng-repeat="item in infiniteList">
                        <td style="width:100%">
                            <div>{{item}}</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div style='clear: both;'></div>
    </div>
</div>

<h4>{{scrollTriggered}}</h4>
</div>

and my script

 .controller("DashboardCtrl", ["$scope",
function ($scope) {

$scope.infiniteList = [];
$scope.incr = 1;

$scope.scrollTriggered = "";

$scope.loadMore = function () {

    $scope.scrollTriggered += "\n Scroll Triggered"
    for (var i = 0; i < 30; i++) {
        $scope.infiniteList.push("Item " + $scope.incr);
        $scope.incr += 1;
    }
};
 }
 ])

Which ends up looking as so enter image description here and does not trigger the scroll function which is shown in my plunkr.

http://plnkr.co/edit/c29ZcoofTqgPXoRpmFbk?p=preview

Any help would be greatly appreciated

Upvotes: 0

Views: 304

Answers (1)

Julius Doan
Julius Doan

Reputation: 356

So this was apparently is a weird answer since it really didn't cross my mind. Because I have a google maps that is full page, I used the .html tag that was 

.html{
height 100%;
}

This caused some errors as it would trigger the scroll at all. Therefore I couldn't scroll at all. Removing the height restriction allowed it to scroll.

Upvotes: 1

Related Questions