Prevent scroll event triggered when content push at top

Question

I noticed that jquery scroll event automatically triggered when some content push at the top of the page by ajax. Any expert know how to avoid scroll event being triggered when the content has been added? But scroll event triggered when user run the mousewheel, page up down as well as keyboard up and down probably?

$(window).on('scroll', function () {
        console.log("User manual scrolled.");
    });

Based on this example. https://jsfiddle.net/q00jnv4n/

Which jQuery version? I don't see this behavior in the jQuery 2.1.3 -- https://jsfiddle.net/ndnz8v79/ — Ahmad Ibrahim, Apr 20 '15 at 02:11
based on this example, it seems will trigger the event either in 2.1.1 or 2.1.3 version. https://jsfiddle.net/q00jnv4n/ — Su Beng Keong, Apr 20 '15 at 02:32
It's because of that line `$(window).scrollTop(divHeight);` in `AddContent()` function — Ahmad Ibrahim, Apr 20 '15 at 02:47
Ok.. so means content push on top won't trigger the event, but scrollTop will trigger that event hence it become like a rubberband. — Su Beng Keong, Apr 20 '15 at 02:49
@Mah Jin Khai: Can you please clarify your overall aim, rather than just trying to "prevent scroll event"? The question is not clear as written as you are focusing on only one detail of the problem. Thanks. — iCollect.it Ltd, Apr 21 '15 at 08:57

score 3 · Answer 1 · answered Apr 23 '15 at 12:49

.off function used to Remove an event handler.

You should be using $(window).off("scroll") just before loading content by ajax and then again use $(window).on('scroll', function () { after loading the content

By using .off your scroll handler will be remove while content is being loaded on site.

score 0 · Answer 2 · answered Apr 20 '15 at 16:42

0

One option to stop the display appearing to move is to adjust the scrollTop by the amount the #result div has changed in height e.g. scrollTop = (scrollTop + newHeight - oldHeight):

function AddContent() {
    var height = $('#result').height();
    console.log("height: " + height);
    $(".UnloadedPara").each(function () {
        //console.log();
        $(this).replaceWith("<div>This is some new paragraph</div>");
    });

    var newHeight = $('#result').height();
    $(window).scrollTop($(window).scrollTop() + newHeight - height);
}

JSFiddle: https://jsfiddle.net/TrueBlueAussie/q00jnv4n/12/

answered Apr 20 '15 at 16:42

iCollect.it Ltd

92,391
25
181
202

this is not the answer OP is looking for. – Shoaib Shakeel Apr 21 '15 at 08:34
@Shoaib Shakeel: In that case: I am glad *you* understand the question (which it not clear). Perhaps you can clarify it? – iCollect.it Ltd Apr 21 '15 at 08:35
`$(window).scrollTop` fires an event 'scroll' when called. OP wants to suppress this event in case `Add Content` button is clicked. – Shoaib Shakeel Apr 21 '15 at 08:52
1

@Shoaib Shakeel: Sounds like an X-Y question to me. I would prefer to hear the OPs overall aim, rather than one specific detail they think they need. I will ask them for clarification :) – iCollect.it Ltd Apr 21 '15 at 08:56
Thanks everyone. i got some workaround for this, will post later, because i am busy with something right now. – Su Beng Keong Apr 22 '15 at 04:03

score 0 · Answer 3 · answered Apr 21 '15 at 09:02

You are using window.scrollTop() in your code. It will automatically trigger scroll event in jQuery as jQuery uses window.scrollTo() under the hood.

You cannot suppress 'scroll' event fired by this. But you can use a hack to detect if scroll event was called after you 'AddContent' called window.scrollTop(). You can do it by setting a boolean variable in your AddContent to false. And check in your scroll event handler if the variable if false or not. If it is false then set it to true and don't do anything. Otherwise perform you desired action.

I forked your jsfiddle and updated it: JsFiddle

score 0 · Answer 4 · edited May 23 '17 at 11:44

0

referring to this post, there exists an event only listening to mousescroll.

$(window).bind('mousewheel DOMMouseScroll', function(e){
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
        // scroll up
    } else {
        // scroll down
    }
});

greetings timotheus

edited May 23 '17 at 11:44

Community

1
1

answered Apr 24 '15 at 15:38

Timotheus0106

1,536
3
18
28

score 0 · Answer 5 · answered Apr 25 '15 at 22:51

0

This is merely a workaround, but if you need a quick fix you can have the window scroll back to the button after the new content has been loaded at the top.
https://jsfiddle.net/msfq5mx0/

$(window).scrollTo(0,$("#btnAddContent").offset().top);

answered Apr 25 '15 at 22:51

Mike Hamilton

1,519
16
24

Prevent scroll event triggered when content push at top

5 Answers5