Resize triggers on scrolling in mobile & scrolls layout back to top

Question

Popular resize on scroll: There is a famous issue on mobile that while scrolling page resize event is triggered and there is a fine solution for it here.

My Scenario: In my case I am using wordpress with lots of scripts from different plugin and not sure which plugin/script is triggering scroll to top on page scroll which I am sure is because of resize event trigger.

The usual solution: I can turn of each script/plugin to find out the culprit & then add the famous solution of checking width update but It will take a lots of time and I have a different approach that I want to apply here that will not require to adjust resize function separately for each plugin.

Solution: I want to integrate the famous solution right inside jQuery resize function to check weather page width was actually change and should the resize function trigger in response?

Imran Bughio · Accepted Answer · 2017-01-06T15:43:48.183

In jQuery v1.12.4 I added some code which will check the fired event if is 'resize' then check if width and height were changed and only then fire the event otherwise ignore.

Added this at the top of file for global variables:

var gWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var gHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

In the middle of jQuery file:

    if ( !( eventHandle = elemData.handle ) ) {
        eventHandle = elemData.handle = function( e ) {

            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded

            // Custom code for detecting and pausing resize
            if(e.type == 'resize'){

                var tempHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
                var tempWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

                if(Math.abs(gHeight - tempHeight) > 100  || gWidth != tempWidth){
                    gWidth = tempWidth;
                    gHeight = tempHeight;
                    return typeof jQuery !== "undefined" &&
                        ( !e || jQuery.event.triggered !== e.type ) ?
                        jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
                        undefined;
                }else{
                    return false;
                }
            }else{
                return typeof jQuery !== "undefined" &&
                        ( !e || jQuery.event.triggered !== e.type ) ?
                        jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
                        undefined;
            }
            // Custom code end.

        };

Note that I am using Math.abs to see if the new height is at least 100px of different because mostly the height changes due to appearance and disappearance of address bar.

Frankly speaking jQuery should have at-least the width change check in it for resize event.

Resize triggers on scrolling in mobile & scrolls layout back to top

1 Answers1