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

Question

我使用下面的脚本在滚动到达页面底部时加载数据。除了 Chrome 之外，它可以在所有浏览器上正常工作。在 Chrome 中，当我使用键盘快捷键

Ctr+

或

Ctrl-

（> 或 < default zoom ) it doesn't work properly.

）手动放大/缩小窗口时

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

Answer 1

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

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

代码是这样的，

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

编辑

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

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

• 我这边还没有测试过。

Answer 2

Math.ceil()

为我工作；）

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

Answer 3

我在实现 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);

Answer 4

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

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

Answer 5

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

Answer 6

我认为这与以下事实有关：

scrollTop 是一个非四舍五入的数字

Mdn Web Docs 建议使用这样的表达式：

Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 1

我认为在这种情况下，表达可能更像是这样：

if (Math.abs($(window).scrollHeight - $(window).clientHeight - $(window).scrollTop) < 1) { 
     loadData();
}

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#define_if_an_element_has_been_totally_scrolled