Infinite-scroll not enabling scroll on first result in angular js

Question

I used infinite-scroll on a div which is as below

<div ng-app='myApp' ng-controller='DemoController'>
  <div id="scroll" infinite-scroll='reddit.nextPage()' 
  infinite-scroll-disabled='reddit.stopscript'   infinite-scroll-distance='2'   
    style="height:500px;overflow-y:scroll; border:solid 1px black">             

  <div ng-repeat='item in reddit.items'>
      <span>{{item.CourseId}}</span>
      <span>{{item.Name}}</span>
  </div>
<div ng-show='reddit.busy'>Loading data...</div>

and my controller code is

var myApp = angular.module('myApp', ['infinite-scroll']);

 myApp.controller('DemoController', function ($scope, Reddit) {
$scope.reddit = new Reddit();
});

 // Reddit constructor function to encapsulate HTTP and pagination logic
    myApp.factory('Reddit', function ($http) {
   var Reddit = function () {
    this.items = [];
    this.busy = false;
    this.after = '';
    this.counter = 30;
    this.index = 0;
    this.stopscript = false;
};

Reddit.prototype.nextPage = function () {
    if (this.busy) return;
    this.busy = true;

    var url = "http://byui.demo.emsicareercoach.com/packets/coursesearch/?Limit=" +         this.counter + "&Offset=" + this.index + "&Search=&x-ResponseType=json&x-Password=944c8e5971db726e0a516f3c6fa2eb922c5a79bb732975421b7f2bf52acce51f";
    $http.get(url).success(function (data) {

        if (data.Results.length == 0) {

            this.stopscript = true;
        }
        else {               
            this.items.push.apply(this.items, data.Results);
            this.index = this.index + this.counter;              
        }
        this.busy = false;
    }.bind(this));
};

return Reddit;

});

this is working fine when my browser is minimized but when my browser is maximized it is showing the first thirty records then it is not hitting that ajax call function again. i used infinite-scroll-distance='2' and even given height to my div but still it is not showing scroll on maximized web page hence not functioning.Plz help

Paul · Accepted Answer · 2014-11-09 20:38:36Z

2

You have to define the infinite-scroll-container, otherwise it will always check the distance to the bottom of the browser window.

Change the HTML to something like this:

<div id="scroll" infinite-scroll='reddit.nextPage()'
     infinite-scroll-container="'#scroll'"
     infinite-scroll-disabled='reddit.stopscript' 
     infinite-scroll-distance='2'   
     style="height:500px;overflow-y:scroll; border:solid 1px black">

Where '#scroll' is the ID of the div containing the scrollable content.

Check this plunker

Important notice: This feature is not included in the latest stable release (v1.0.0) and is only available in the lastest development (master) release.

edited Nov 9, 2014 at 20:38

Paul

7314 silver badges11 bronze badges

answered Aug 14, 2014 at 14:51

bmleite

26.9k4 gold badges74 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bmleite Over a year ago

@shukshum was this helpful?

Shukshum Over a year ago

i did it but no achange happened i also used ng-scroll-paret as well but still no change .actually my infinitescroll js file donot contain any definition for these attributes .do i need to add some other ref..??

bmleite Over a year ago

Which version of ng-infinite-scroll are you using? In my plunker I'm using v1.1.2, can you try with that one?

Shukshum Over a year ago

oh i was using 1.0.0 which is default provided on its web site

Zouzias · Accepted Answer · 2015-02-19 13:07:03Z

-1

A simple workaround might be to increase the number of results that you fetch with your AJAX call so that your browser scrolls.

answered Feb 19, 2015 at 13:07

Zouzias

2,3601 gold badge23 silver badges32 bronze badges

Collectives™ on Stack Overflow

Infinite-scroll not enabling scroll on first result in angular js

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related