javascript - Infinite scroll in Elm -

i building simple application in elm show list of divs 1 under other, , add infinite scroll functionality, add new content every time last div of page appears in viewport.

is there way in elm know when div appears in viewport? alternative, in there way track, signal, mouse scroll event?

there no elm support scroll events, you'll have resort using ports. here's simple example.

we need javascript function tell whether last element in list in view port. can take iselementinviewport code this stackoverflow answer (copied here future reference):

function iselementinviewport (el) {     //special bonus using jquery     if (typeof jquery === "function" && el instanceof jquery) {         el = el[0];     }      var rect = el.getboundingclientrect();      return (         rect.top >= 0 &&         rect.left >= 0 &&         rect.bottom <= (window.innerheight || document.documentelement.clientheight) && /*or $(window).height() */         rect.right <= (window.innerwidth || document.documentelement.clientwidth) /*or $(window).width() */     ); } 

let's html looks this:

<div class="wrapper">   <div class="item">...</div>   <div class="item">...</div> </div> 

your elm code have port acting signal tell whether last item visible.

port lastitemvisible : signal bool 

now need wire port code on javascript side of things. code listen window.onscroll event, check see if last item inside .wrapper div visible, , send appropriate signal.

var app = elm.fullscreen(elm.main, {   lastitemvisible: false });  window.onscroll = function () {   var wrapper = document.getelementsbyclassname("wrapper")[0];   var lastitem = wrapper.childnodes[wrapper.childnodes.length - 1];    if (iselementinviewport(lastitem)) {     app.ports.lastitemvisible.send(true);   } else {     app.ports.lastitemvisible.send(false);   } }; 

if instead wanted signal tracking scroll events, there related stackoverflow answer here.