如果 window 在 chrome 中缩放 in/out，则不会执行滚动事件代码

Question

我正在使用下面的脚本在滚动到达页面底部时加载数据，它在所有浏览器中都可以正常工作。但是，如果我使用键盘快捷键 Ctr+ 或 Ctrl-（> 或 < 默认缩放）手动放大/缩小 window，它似乎在 chrome 中不起作用。

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

Answer 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);

Answer 2

这似乎是 chrome 中的错误，我已报告此 here>>

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

代码是这样的，

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

编辑

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

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

我这边还没有测试。

Answer 3

我认为 detectZoom js 会帮助你这里是 link for the js

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

Answer 4

当浏览器调整大小时，滚动条宽度会动态变化。由于这种情况 ( $(window).scrollTop() + $(window).innerHeight()) >= $(document).height()) 永远不会 returns True .

要解决上述问题，请按照以下步骤操作。

1.Find超出滚动条宽度

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.Then 使用下面的代码检查滚动是否到达底部。

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

Answer 5

Math.ceil() 为我工作 ;)

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

如果 window 在 chrome 中缩放 in/out，则不会执行滚动事件代码

Code on scroll event is not executing if window is zoomed in/out in chrome

javascript

jquery

scroll

lazy-loading