Convert jQuery scroll code to pure javascript

Question

I know well jQuery but with pure javascript I have problems.

Can you help me to convert jquery code to the javascript. Thanks :)

Here is my code.

var container = $('.container');

$(window).scroll(function(event) {
    var scrollTop = $(window).scrollTop();
    var containerTop = container.position().top;
    var containerHeight = container.outerHeight();
    var blockHeight = $('.game-block').height();
    var callPosition = (containerTop + containerHeight) - blockHeight;

    if(scrollTop >= callPosition) {
            //do ajax call
    }
});

I'd highly recommend not converting it. JQuery works around a number of bugs and quirks in browsers -- it's one of the main reasons for using the library. Practically-speaking, if you port this, you'll end up with something that only works in some browsers -- until you fix all the issues and then you might as well just use jQuery. — daf, Jul 13 '16 at 18:25
I have react project and on that project we can't use jquery :( we all write on pure javascrit — Aram Mkrtchyan, Jul 13 '16 at 18:27
There are many sites that have information about how jQuery is compared plain DOM methods. Stack Overflow is not a code writing (or converting) service. See also http://stackoverflow.com/q/978799/215552 — Heretic Monkey, Jul 13 '16 at 18:27
@MikeMcCaughan Sure it is, just look at the answers that magically appeared! /sarcasm — Kevin B, Jul 13 '16 at 18:39

score 1 · Answer 1 · answered Jul 13 '16 at 18:34

var container = document.getElementByClassName('container');

window.addEventListener('scroll', function() {
    var scrollTop = window.scrollY;
    var containerTop = container.offsetTop;
    var containerHeight = container.offsetHeight;
    var blockHeight = document.getElementByClassName('game-block').clientHeight;
    var callPosition = (containerTop + containerHeight) - blockHeight;
});

Convert jQuery scroll code to pure javascript

1 Answers1