在移动设备中滚动时调整触发器大小并将布局滚动回顶部

Question

popular resize on scroll:移动端有一个著名的问题，当滚动页面时resize事件被触发，并且有一个很好的解决方案here.

我的场景： 在我的例子中，我使用的 wordpress 有很多来自不同插件的脚本，但不确定哪个 plugin/script 触发页面滚动到顶部滚动哪个我确定是因为调整大小事件触发。

通常的解决方案： 我可以打开每个 script/plugin 找出罪魁祸首，然后添加著名的检查宽度更新的解决方案，但这需要很多时间的时间，我想在这里应用一种不同的方法，不需要为每个插件单独调整调整大小功能。

解决方案： 我想在 jQuery resize 函数中集成著名的解决方案来检查天气页面宽度是否确实发生了变化，resize 函数是否应该触发响应？

Answer 1

在 jQuery v1.12.4 中，我添加了一些代码，如果是 'resize'，将检查触发的事件，然后检查宽度和高度是否已更改，然后才触发事件，否则忽略。

在全局变量的文件顶部添加：

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

在 jQuery 个文件的中间：

    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.

        };

请注意，我正在使用 Math.abs 来查看新高度是否至少相差 100 像素，因为大多数情况下高度会因地址栏的出现和消失而发生变化。

坦率地说 jQuery 至少应该在调整大小事件中检查宽度变化。

在移动设备中滚动时调整触发器大小并将布局滚动回顶部

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

javascript

wordpress

jquery

scroll

resize