Question

例如：

HTML

<div><p>A lot of text that goes off the page so you have to scroll down.........</p></div>

的JavaScript

$(window).resize(function(){
    $("div").append("<p>appended</p>");
});

这可以在调整大小时按预期方式附加段落，但在向下滚动时也会附加它。这意味着当我到达原始文本的末尾时，大约有20个附加段落。

这只发生在移动设备上（到目前为止我已经检查过Chrome，Safari和Firefox），而不是在桌面浏览器上。

有没有办法阻止这种情况发生，只有当窗口（你看到的）调整大小时才附加段落？或者可能只是经常调整resize中的代码？

感谢。

Answer 1

移动设备的问题在于它们具有在滚动时隐藏的浏览器工具栏，这会导致屏幕更改（激活调整大小事件），这意味着您必须对代码进行一些验证并检测原因已触发resize事件。

我使用的一种方法是保存窗口宽度并检查正确的窗口宽度是否相同或更改。如果它改变则意味着附加应该发生（在你的情况下）。

var dwidth = $(window).width();

$(window).resize(function(){
    var wwidth = $(window).width();
    if(dwidth!==wwidth){
         dwidth = $(window).width();
         console.log('Width changed');
    }
});

在移动设备上滚动时执行$（window）.resize（）

1 个答案: