0

I am using ngInfiniteScroll to enable infinite scrolling on my website. In order to get it to work I have had to set the height of the outer div to a value as shown below. If I don't do this the Infinite Scroll feature is triggered 

<div style="height: 1px">
   <post post-item="item" feed-items="items.feed" feed-name="feedName" ng-repeat="item in items.feed"></post>
   <a style="bottom-padding 7%" infinite-scroll="nextPosts()" infinite-scroll-distance="1" href ng-click="nextPosts()" class="show-more">No more posts to show </a>   
</div>

However, setting the height:1px kind of screws up my css styling and I feel like it is technically cheating, especially since I have to do the bottom-padding on the

Does anybody know a way I can get the Infinite Scroll to not be triggered on all scrolling events without using the style="height: 1px

I have already looked at this post but it has not really helped. How do you keep parents of floated elements from collapsing?

Thanks!

Community
  • 1
  • 1
mattman88
  • 425
  • 7
  • 18
  • what is your `nextPosts` function? – dnozay Nov 07 '14 at 08:26
  • The next posts function simply calls the next 10 posts from the DB and displays them on the page. The problem is that it keeps getting triggered whenever I scroll no matter where I am on the page, unless I put in that style="height: 1px">, then it works. But it feels a little like cheating to throw that style in there, and I'd love for it to work without it if possible. Or did you want to see code? – mattman88 Nov 07 '14 at 08:29

1 Answers1

0

http://binarymuse.github.io/ngInfiniteScroll/documentation.html

Typically, you will use the infiniteScroll directive on an element that contains another element that uses ngRepeat to show a series of elements based on an array (or object); the expression you pass in to the infinite-scroll attribute will generally add additional elements to the array, expanding the ngRepeat.

maybe you could try the base example:

<div infinite-scroll="nextPosts()">
   <post post-item="item" feed-items="items.feed" feed-name="feedName" ng-repeat="item in items.feed"></post>
</div>
dnozay
  • 22,109
  • 4
  • 75
  • 93
  • Hi @mvermand I don't see a demo there actually, did you forget to post the link? – mattman88 Nov 07 '14 at 07:46
  • Hi @dnozay, unfortunately that won't work. There is something about the browser thinking the height of the div is 0 without putting that style="height: 1px" in there, so it just triggers the Infinite Scroll event whenever I scroll the browser. Any suggestions of how to get the results of style="height: 1px" without the consequences of messing up the rest of my stylings? – mattman88 Nov 07 '14 at 07:49
  • @mvermand, thank you for the demo, I see what they have done and it makes sense. But I do not see why mine does not work? Do you see why there's works and mine does not? If so, I'd love to understand what is going wrong on my end without adding the style="height: 1px" – mattman88 Nov 07 '14 at 07:51
  • @mattman88 can you create a plunkr or jsfiddle showing the issue? That makes it easier to investigate. – mvermand Nov 07 '14 at 07:55
  • I would suggest `min-height: 1px` in a child `
    `
     – dnozay Nov 07 '14 at 07:55
  • @mvermand I am a bit of a newb to web programming so have not done a plunkr or jsfiddle but i'll figure out how to do it real quick, might take a sec though – mattman88 Nov 07 '14 at 07:57
  • @dnozay I will give that a go. I actually noticed that is what they do on the official demo here http://binarymuse.github.io/ngInfiniteScroll/demo_basic.html so good thinking! I couldn't get it to work before but will try to again – mattman88 Nov 07 '14 at 07:59
  • @dnozay is this what you had in mind? I just tried it and it does not seem to work. Still everytime I scroll newPosts() is triggered. `` – mattman88 Nov 07 '14 at 08:04
  • @mvermand go to www.nusiki.com and sign in with Login: mfweiss Password: password and check it out. The infinite scroll malfunction is not on there unfortunately, but i do not know how to put this entire thing on plunker or jsfiddle. That seems like it would take awhile. But this will allow you to play around with the site. – mattman88 Nov 07 '14 at 08:10
  • @mattman88 nice site! and... using Chrome I do not see anything wrong in the layout. What browser are you using? – mvermand Nov 07 '14 at 08:16
  • Thanks! I am using chrome as well, so there is nothing wrong with that version of the site. I'm working on a local copy that is using ngInfiniteScroll to make it so that instead of hitting "show more" at the bottom, it just loads as you scroll down. my problem is that without that style="height: 1px" it loads more posts no matter where I am on the page, I just want it to load when I'm near the bottom – mattman88 Nov 07 '14 at 08:20