6

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();
 }
Prasanth K C
  • 7,073
  • 5
  • 39
  • 62

6 Answers6

5

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.
Prasanth K C
  • 7,073
  • 5
  • 39
  • 62
  • Please check below my answer. – Rayudu May 06 '19 at 11:06
  • 1
    5 years on, and I have this issue. I have a chat like app and i am facing the issue. if (scrollTop === (offsetHeight - scrollHeight) { load messages } works fine till I zoom in. Any help? – Ramya May 14 '21 at 13:13
2

Math.ceil() work for me ;)

methods: {    
    onScroll ({ target: { scrollTop, clientHeight, scrollHeight }}) {
      if ( (scrollTop > 0 ) && (**Math.ceil**(scrollTop + clientHeight) >= scrollHeight) ) {        
        // your code here
      }
    }
}
Sebastian B.
  • 2,141
  • 13
  • 21
Roland Olejár
  • 21
  • 1
  • Yeah it seems shaving off that fraction of a pixel works. I did the same thing but it was `Math.floor()` in my equation. – evolross Feb 18 '21 at 20:27
0

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);
Alex Filatov
  • 2,232
  • 3
  • 32
  • 39
  • So, `$(window).scrollTop() > 400` will get satisfied in all browsers when we scroll to the bottom of the page even if zoomed? is that you are trying to say? – Prasanth K C May 19 '15 at 09:00
0

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

Mitul
  • 3,431
  • 2
  • 22
  • 35
0

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();
}
Rayudu
  • 1,806
  • 1
  • 14
  • 31
0

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.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled

Randy Douglas
  • 1