How to prevent executing window.onpopstate function while window.scroll event using jquery

Question

The scenario is when I scroll in browser it executes

$(window).scroll(function() { ...  }

but in same page I have onpopstate function which usually executes when I press back/forward button in browser

window.onpopstate = function(event) { ...  }

Here is my complete script on html page

<script>
    window.onpopstate = function(event) { ...  }

    $( document ).ready(function() {
        $(window).scroll(function() { ...  }
    });
</script>

Issue is when I scroll in browser it executes $(window).scroll as well as window.onpopstate both the events.

Can anyone help me out here, as how do I prevent executing window.onpopstate event while scrolling.

this so post may be helpful, http://stackoverflow.com/questions/5802467/prevent-scrolling-of-parent-element — Anil, Mar 15 '17 at 07:32
@Anil : Where do I need to keep "e.preventDefault();" basically ? — Sunny Chaudhari, Mar 15 '17 at 07:48
we should do in first event; say as first statement, to omit event's default behavior, like raise next event etc. $(window).scroll(function(e) { e.preventDefault(); }. — Anil, Mar 15 '17 at 07:55

Anil · Accepted Answer · 2017-03-15T09:36:32.013

1

The $(window).scroll event always raises the popstate event and we should not stop this by using event propagation, as A popstate event is dispatched to the window every time the active history entry changes between two history entries for the same document. refer details on MDN

The solution here can be be to put a check in popstate 's handler like
when event.state is not null then do your job else skip

window.addEventListener('popstate', function(event) {
        if (event.state) {
            -- do your job
        }
    }, false);

edited Mar 15 '17 at 09:36

answered Mar 15 '17 at 08:01

Anil

3,722
2
24
49

Thanks !! It works for me. Explanation is also acceptable. Good catch – Sunny Chaudhari Mar 15 '17 at 11:24

score 0 · Answer 2 · answered Mar 15 '17 at 07:23

<script type="text/javascript">
    window.onpopstate = function(event) {
        alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
     }

     $(document).ready(function () {
         $(window).scroll(function () {
             alert(2);
         });
     });

     history.pushState({ page: 1 }, "title 1", "?page=1");   
     history.pushState({ page: 2 }, "title 2", "?page=2");   
     history.replaceState({ page: 3 }, "title 3", "?page=3");
     history.back(); 
     history.back();
     history.go(2);  
</script>

I also testing, but without this issue.

If you can provide detail code.

I have given the complete script in my question itself. The issue is when you scroll, it executes window.scroll function but also executes "onpopstate" function which I want to prevent. — Sunny Chaudhari, Mar 15 '17 at 07:51

How to prevent executing window.onpopstate function while window.scroll event using jquery

2 Answers2