0

I'm working on building a infinite scroll feature in an Angular app. Building 1 step at a time, currently I'm at the part where I've attached a scroll eventListener to the #tags-col or tagsCol.

plnkr: http://plnkr.co/edit/7OnKAGvVNXWLwN5fZqJu?p=preview

I have code that is suppose to return the top y value of tagsCol, however the number never updates with the logs as you scroll the element up, it stays stuck at 118.8125.

How would you get the moving y value of the tagsCol? Or better yet, detect when the bottom / last element inside of the tagsCol panel is visible?

function getOffset(el) {
    el = el.getBoundingClientRect();
    return {
      top: el.top + window.scrollY
    }
}

var scrollingElement =  function(event) {
    console.log(tagsCol);
    var yPos = getOffset(tagsCol).top
    console.log(yPos);
};

document.getElementById('tags-col').addEventListener('scroll', scrollingElement);

enter image description here

Leon Gaban
  • 36,509
  • 115
  • 332
  • 529
  • You can try and compare the elements `offsetTop` towards `window.pageYOffset` once you scroll. The elements position itself remains the same within the body even if you scroll. – Fredrik Borggren Jun 03 '15 at 21:51

1 Answers1

0

Maybe this solution might work for you.

var el = document.getElementById("tags-col");
var offsetTop = el.offsetTop;

function callback() {
    if (offsetTop < window.pageYOffset) {
        // do something
    } else {
        // do something else
    }
}

if (window.addEventListener) {
    window.addEventListener("scroll", callback, false);
} else {
    window.attachEvent("onscroll", callback);
}

Does that make sense?

Fredrik Borggren
  • 107
  • 6
  • I get I need to do some kind of check, but still don't know how to get the correct value that is actually moving. – Leon Gaban Jun 03 '15 at 22:00
  • I found [this link](http://stackoverflow.com/questions/270612/scroll-to-bottom-of-div) maybe it helps you? – Fredrik Borggren Jun 03 '15 at 22:11
  • 1
    Or [this link](http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling) maybe? – Fredrik Borggren Jun 03 '15 at 22:13
  • Ah yeah that was it! `.scrollTop` Now I see the value changing... hmmm, next step put in an check to see when a certain point has been crossed, and actually next step is determine what that point should be. – Leon Gaban Jun 03 '15 at 22:19