3

Like instagram feed autoplay when in view, I would like to understand where the scroll and inview logic will be.

I have this setup:

<ContentList>
  <Item>
  <Item>
  <Item>
  <Item>
</ContentList>

I have window scroll added to ContentList when it mounts. I dont know if thats a good idea because I dont have direct references to Item's dom to know when it is inside viewport.

Whats the best way to approach this?

Facundo La Rocca
  • 3,786
  • 2
  • 25
  • 47
rdilig
  • 69
  • 1
  • 4
  • 1
    wow this is a loaded question... you may want to consider breaking it up into separate parts. A little direction though... the scroll on contentlist is fine... you need to determine if the scroll position is near the end of your container height.. and if so load more items.. can you clarify what you mean by `I dont have direct references to Item's dom to know when it is inside viewport` ?? – John Ruddell Nov 11 '15 at 06:02
  • I would suggest to go and read http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport – Dirk-Jan Nov 11 '15 at 09:15
  • Thanks everyone for responding. I can apply the element in view logic in vanillaJS but I'm having trouble organizing the logic in reactjs. ContentList doesnt have visibility to Item's dom elements to do the check within the scroll. My understanding is that Owners doesnt know Ownee's internal dom. If I place the scroll event in Item, I would have to have multiple scroll listeners for each Item. – rdilig Nov 14 '15 at 02:06
  • I saw this: [link](http://stackoverflow.com/questions/24841855/react-js-access-to-component-methods) Is it a good pattern for the Owner to access the childs methods and ask for the internal element's position? – rdilig Nov 14 '15 at 02:12

0 Answers0