Javascript 如果在chrome中放大/缩小窗口，则不会执行滚动代码事件

我正在使用下面的脚本在滚动页面底部加载数据，在所有浏览器中都可以正常工作。但如果我使用键盘快捷键

Ctr+

或

Ctrl-

（>或

---

我在实现userJS扩展时也遇到了同样的问题

您可以在Firefox、Chrome和IE中使用以下代码：

function main() {
    var disp = $(window).scrollTop() > 400 ? 'block' : 'none';
    var $upButton = $('<div class="up-button" title="Up" style="display:' + disp + '">UP</div>');

    $(document).find('body').append($upButton);
    $upButton.click(function () {
        $('html, body').animate({ scrollTop: 0 }, 'slow');
    });

    $(window).scroll(function () {
        if ($(window).scrollTop() > 400) $upButton.fadeIn('slow');
        else $upButton.fadeOut('slow');
    });
};

var script = document.createElement('script');
script.appendChild(document.createTextNode('('+ main +')();'));
(document.body || document.head || document.documentElement).appendChild(script);

函数main（）{
var disp=$（window.scrollTop（）>400？'block'：'none'；
变量$upButton=$（'UP'）；
$（文档）.find（'body'）.append（$upButton）；
$upButton.单击（函数（）{
$（'html，body'）。动画（{scrollTop:0}，'slow'）；
});
$（窗口）。滚动（函数（）{
if（$（window.scrollTop（）>400）$upButton.fadeIn（'slow'）；
else$upButton.fadeOut（'slow'）；
});
};
var script=document.createElement（'script'）；
script.appendChild（document.createTextNode（“（“+main+”）（）；”）；
（document.body | | document.head | | document.documentElement）.appendChild（脚本）；

这似乎是chrome中的一个bug，我已经报告了这个

甚至，我通过应用一个小的高度减少（-100）使其工作，以在到达滚动端之前满足条件

代码是这样的

if (($(window).scrollTop() + $(window).innerHeight()) >= $(document).height()-100){ 
    loadData();
 }

编辑

Chrome开发者在上面链接的bug中给出了以下建议

$(window).scrollTop() + $(window).height() >= $(document).height()

• 我这边还没有测试过

---

我认为detectZoom js将帮助您这里是js的链接

---

当浏览器调整大小时，滚动条宽度将动态变化。由于此条件（$（窗口）.scrollTop（）+$（窗口）.innerHeight（））>=$（文档）.height（）将永远不会返回True

要解决上述问题，请执行以下步骤

1.找出滚动条的宽度

function getScrollbarWidth() {
var outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

document.body.appendChild(outer);

var widthNoScroll = outer.offsetWidth;
// force scrollbars
outer.style.overflow = "scroll";

// add innerdiv
var inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);        

var widthWithScroll = inner.offsetWidth;

// remove divs
outer.parentNode.removeChild(outer);

return widthNoScroll - widthWithScroll;
}

2.然后使用下面的代码检查滚动是否到达底部

 if (($(window).scrollTop() + $(window).innerHeight()) >= $(document).height()-getScrollbarWidth()){ 
   loadData();
}

Math.ceil（）

为我工作；）

---

因此，当我们滚动到页面底部时，即使缩放，在所有浏览器中，

$（window）.scrollTop（）>400

也能满足需要？这是你想说的吗？请检查下面我的答案。5年过去了，我有这个问题。我有一个类似聊天的应用程序，我面临着这个问题。如果（scrollTop==（offsetHeight-scrollHeight）{load messages}在我放大之前可以正常工作。有什么帮助吗？是的，似乎剃掉那一小部分像素就可以了。我做了同样的事情，但在我的等式中是

Math.floor（）

。

 if (($(window).scrollTop() + $(window).innerHeight()) >= $(document).height()-getScrollbarWidth()){ 
   loadData();
}

methods: {    
    onScroll ({ target: { scrollTop, clientHeight, scrollHeight }}) {
      if ( (scrollTop > 0 ) && (**Math.ceil**(scrollTop + clientHeight) >= scrollHeight) ) {        
        // your code here
      }
    }
}