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

【问题标题】：Code on scroll event is not executing if window is zoomed in/out in chrome如果窗口在 chrome 中放大/缩小，则滚动事件的代码不会执行
【发布时间】：2015-07-30 23:30:19
【问题描述】：

我正在使用下面的脚本在滚动到页面底部时加载数据，并且它在所有浏览器中都可以正常工作。但是，如果我使用键盘快捷键 Ctr+ 或 Ctrl-(> 或

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

【问题讨论】：

标签： javascript jquery scroll lazy-loading

【解决方案1】：

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

您可以使用适用于 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);

【讨论】：

那么，$(window).scrollTop() > 400 会在我们滚动到页面底部时在所有浏览器中得到满足，即使是缩放了？这是你想说的吗？

【解决方案2】：

这似乎是 chrome 中的一个错误，我已经报告了这个 here>>

甚至，我通过应用一个小的高度降低 (-100) 使其工作，以满足在它到达滚动端之前的条件。

代码是这样的，

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

编辑

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

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

我这边还没有测试。

【讨论】：

请在下面查看我的答案。
5 年过去了，我遇到了这个问题。我有一个类似应用程序的聊天，我正面临这个问题。 if (scrollTop === (offsetHeight - scrollHeight) { load messages } 工作正常，直到我放大。有帮助吗？

【解决方案3】：

我认为detectZoom js会帮助你这里是js的链接

https://github.com/tombigel/detect-zoom/blob/master/detect-zoom.js

【讨论】：

【解决方案4】：

当浏览器调整大小时，滚动条宽度会动态变化。由于这种情况（ $(window).scrollTop() + $(window).innerHeight()) >= $(document).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();
}

【讨论】：

【解决方案5】：

Math.ceil() 为我工作 ;)

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

【讨论】：

是的，它似乎削减了像素的一小部分。我做了同样的事情，但在我的等式中是Math.floor()。