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();
}
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()
Math.ceil() work for me ;)
methods: {
onScroll ({ target: { scrollTop, clientHeight, scrollHeight }}) {
if ( (scrollTop > 0 ) && (**Math.ceil**(scrollTop + clientHeight) >= scrollHeight) ) {
// your code here
}
}
}
Math.floor() in my equation.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);
$(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?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
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();
}
$(window).scrollTop() + Math.ceil($(window).height()) >= $(document).height()
