How to stop $(window). scroll in an on-demand query

Question

I make an on-demand query on my page, I bring the information from the bank while the user uses the scroll.

$(window).scroll(function(evento){
    evento.preventDefault();
    var init = $(".canal .lista ul#dem").length;
    carregar(init + 1, init + 2, 'lista_load.asp');
});

The problem is that I don’t know how to stop the scroll, I do a check, I did a validation so that when I got to the end of the items showed me an Alert, and it worked well, wanted at that point that the scroll function would stop bringing the items, but I don’t know how to do, someone can help me?

Answer 1

The event scroll can’t cancel. That’s very clear in the specification of W3C.

The only way I know how to get around this is:

• overflow: hidden;
• an event receiver that forces the scroll position not to change

The first option, to give overflow: hidden; no body is widely used in cases where the scroll should not happen. In your case you want the scroll work until a certain point and then stop working. To use this idea you have to read the scroll position and apply the overflow: hidden; in the body or parent element of the other.

Example:

CSS

div {
    height: 4000px;
    border: 1px solid #ccf;
}
.pararScroll {
    overflow: hidden;
    background-color: #eee;
}

JS

window.addEventListener('scroll', function (e) {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollTop > 1000) document.body.classList.add('pararScroll');
});

jsFiddle: http://jsfiddle.net/51p1tq4u/

The second option need you to save the value of the last scroll position. So at each event scroll, the position must be the one prior to that event scroll.

Example:

var lastScroll;
window.addEventListener('scroll', function (e) {
    if (lastScroll) return window.scrollTo(0, lastScroll);

    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollTop > 1000) lastScroll = scrollTop;
});

jsFiddle: http://jsfiddle.net/51p1tq4u/1/

And if you want to turn the scroll back on, you just have to change the value of lastScroll to a value that has boolean value false.