How to detect if browser window is scrolled to bottom?
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// you're at the bottom of the page
}
};
See demo
Check if a user has scrolled to the bottom (not just the window, but any element)
Use the .scroll()
event on window
, like this:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});
You can test it here, this takes the top scroll of the window, so how much it's scrolled down, adds the height of the visible window and checks if that equals the height of the overall content (document
). If you wanted to instead check if the user is near the bottom, it'd look something like this:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
alert("near bottom!");
}
});
You can test that version here, just adjust that 100
to whatever pixel from the bottom you want to trigger on.
How to detect if browser window is near the bottom?
I managed to changed the scroll function into this and now it's working.
const handleScroll = () => {
if (
window.innerHeight +
Math.max(
window.pageYOffset,
document.documentElement.scrollTop,
document.body.scrollTop
) >
document.documentElement.offsetHeight - 100
) {
setIsFetching(true);
} else {
return;
}
};
The number that's being reduced from document.documentElement.offsetHeight
determines the amount remaining from the bottom of the page. 100 seems enough for me since I tested it on my phone and it works.
Javascript: How to Detect if browser window is scrolled at bottom on android device
I have solved this issue.
Actually logic is correct not issue with it.
But have gone through the HTML and CSS and got to know that my HTML is breaking and because of that i was getting wrong scrollTop() and document height.
Detecting when user scrolls to bottom of div with React js
you can use el.getBoundingClientRect().bottom
to check if the bottom has been viewed
isBottom(el) {
return el.getBoundingClientRect().bottom <= window.innerHeight;
}
componentDidMount() {
document.addEventListener('scroll', this.trackScrolling);
}
componentWillUnmount() {
document.removeEventListener('scroll', this.trackScrolling);
}
trackScrolling = () => {
const wrappedElement = document.getElementById('header');
if (this.isBottom(wrappedElement)) {
console.log('header bottom reached');
document.removeEventListener('scroll', this.trackScrolling);
}
};
Check if user scroll to bottom of the page work opposite
please try this one
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});
you can also have another option on the following question:
Check if a user has scrolled to the bottom
Related Topics
Multiple Assignment in JavaScript? What Does [A,B,C] = [1, 2, 3]; Mean
Why Does Google Prepend While(1); to Their JSON Responses
Create a Custom Callback in JavaScript
Check/Uncheck Checkbox with JavaScript
Comparing Date Part Only Without Comparing Time in JavaScript
Interface Type Check with Typescript
Asynchronously Load Images with Jquery
How to Listen to a "Style Change" Event
Primitive Value VS Reference Value
JavaScript Regex - Look Behind Alternative
What Values Can a Constructor Return to Avoid Returning This
Why Are Callbacks from Promise '.Then' Methods an Anti-Pattern
Detect Ie Version (Prior to V9) in JavaScript