I'm using below script to load data when scroll reaches bottom of the page. it's working fine with all the browsers except chrome. In chrome when i manually zoom in / zoom out window using keyboard shortcuts Ctr+ or Ctrl-(> or < default zoom ) it doesn't work properly.

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

I'm using below script to load data when scroll reaches bottom of the page. it's working fine with all the browsers except chrome. In chrome when i manually zoom in / zoom out window using keyboard shortcuts Ctr+ or Ctrl-(> or < default zoom ) it doesn't work properly.

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

• javascript
• jquery
• scroll
• lazy-loading

7 Answers 7

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

i made it working by applying a small height reduction (-100) to satisfy the condition little early 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.

Math.ceil() work for me ;)

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

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

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

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

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();
}

I think this has something to do with the fact that:

scrollTop is a non-rounded number

Mdn Web Docs suggests a expression like this:

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

I think in this case the expression might be more like this:

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

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

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