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

问题

I'm using below script to load data on scroll reaches bottom of the page and its working fine in all browsers. But it doesn't seems working in chrome if i manually zoom in / zoom out window using keyboard shortcuts Ctr+ or Ctrl-(> or < default zoom ).

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

回答1:

This seems to be a bug in chrome and i have reported this here>>

Even, i made it working by applying a small height reduction (-100) to satisfy the condition little before it reaches the scroll end.

code goes like this,

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

EDIT

Chrome developers gives following suggestion in the bug linked above.

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

Not tested yet from my side.

回答2:

I have the same issue while implemented my userJS extension backTopUserJS

You can use this code which works in Firefox, Chrome and 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);

回答3:

I think detectZoom js will help you here is the link for the js

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

回答4:

When browser resize happened , scroll bar width will get changes dynamically. due to this condition ( $(window).scrollTop() + $(window).innerHeight()) >= $(document).height()) will never returns True.

To fix above issue follow the below steps.

1.Find out the scroll bar width.

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 use the below code to check whether scroll is reached bottom or not.

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

来源：https://stackoverflow.com/questions/30320512/code-on-scroll-event-is-not-executing-if-window-is-zoomed-in-out-in-chrome