[英]Resize triggers on scrolling in mobile & scrolls layout back to top
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 . 热门调整上滚动:有上移动一个著名的问题,虽然滚动页面
resize
事件被触发,并有它的罚款解决方案在这里 。
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. 我的场景:就我而言,我正在使用wordpress以及来自不同插件的许多脚本,并且不确定是哪个插件/脚本触发了滚动到页面滚动的顶部,我确信这是由于调整大小事件触发。
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? 解决方案:我想在jQuery调整大小函数中集成著名的解决方案,以检查天气页面宽度是否确实发生了变化,调整大小函数是否应该响应而触发?
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. 在jQuery v1.12.4中,我添加了一些代码,该代码将检查触发事件是否为'resize',然后检查宽度和高度是否已更改,然后才触发事件,否则将其忽略。
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: 在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.
};
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. 请注意,我正在使用
Math.abs
来查看新高度是否至少相差100px,因为大多数高度是由于地址栏的出现和消失而改变的。
Frankly speaking jQuery should have at-least the width change check in it for resize event. 坦白地说,jQuery至少应在其中进行宽度更改检查以进行调整大小事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.