Detecting when user scrolls to bottom of div with jQuery
There are some properties/methods you can use:
$().scrollTop()//how much has been scrolled
$().innerHeight()// inner height of the element
DOMElement.scrollHeight//height of the content of the element
So you can take the sum of the first two properties, and when it equals to the last property, you've reached the end:
jQuery(function($) {
$('#flux').on('scroll', function() {
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
alert('end reached');
}
})
});
http://jsfiddle.net/doktormolle/w7X9N/
Edit: I've updated 'bind' to 'on' as per:
As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.
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.
Detecting end of scroll in a div
You can use element.scrollTop + element.offsetHeight>= element.scrollHeight
to detect scroll end.
Update:
Also adding a condition so that it won't fire when scrolling upwards.
For more on upward scroll condition,you can check this link.
const element = document.getElementById('element');
let lastScrollTop = 0;
element.onscroll = (e)=>{
if (element.scrollTop < lastScrollTop){
// upscroll
return;
}
lastScrollTop = element.scrollTop <= 0 ? 0 : element.scrollTop;
if (element.scrollTop + element.offsetHeight>= element.scrollHeight ){
console.log("End");
}
}
#element{
background:red;
max-height:300px;
overflow:scroll;
}
.item{
height:100px;
}
<div id="element">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
How to detect when a user has scrolled to the bottom of a div in jQuery?
Thanks to Elham linking me to this page https://www.w3docs.com/tools/code-editor/10827 the page had a negative value on it's if statement I added -100 to my if statement and that gave the event a bit of padding and it works every time.
jQuery(function ($) {
$('#terms').bind('scroll', function () {
if ($(this).scrollTop() + $(this).height() >= $(this)[0].scrollHeight - 100) {
alert('end')
}
})
});
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);
}
};
How can I determine if a div is scrolled to the bottom?
You're pretty close using scrollTop == scrollHeight
.
scrollTop
refers to the top of the scroll position, which will be scrollHeight - offsetHeight
Your if statement should look like so (don't forget to use triple equals):
if( obj.scrollTop === (obj.scrollHeight - obj.offsetHeight))
{
}
Edit: Corrected my answer, was completely wrong
Detect if user has scrolled to the bottom of a div
You'll probably have to do some math yourself, based on the current screen size and the div position. The code will look roughly like this (untested):
// Cache these values. If the div size changes, divBottom will need to be recalculated.
var $div = $("#yourdiv");
var divBottom = $div.offset().top + parseInt($div.height());
// Bind a scroll event for the whole page
$("body").bind("scroll", function(e)
{
// Calculate how far down the user has scrolled
var screenBottom = $(this).scrollTop() + parseInt($(window).height());
// Test if the div has been revealed
if(screenBottom > divBottom)
{
// do something
}
});
Related Topics
How to Use Jquery for Xml Parsing with Namespaces
Adding Click Event Listener to Elements with the Same Class
What Is the Meaning of the 'G' Flag in Regular Expressions
Preserving a Reference to "This" in JavaScript Prototype Functions
Get Global Variable Dynamically by Name String in JavaScript
Selecting Null: What Is the Reason Behind Selectall(Null) in D3
Constructors in JavaScript Objects
Are There Constants in JavaScript
Parseint VS Unary Plus, When to Use Which
Render Partial View Using Jquery in ASP.NET MVC
What Is the Meaning of the "At" (@) Prefix on Npm Packages
Define Global Variable with Webpack
React/Jsx Dynamic Component Name
How to Configure Cors in a Spring Boot + Spring Security Application
Iframe Src Change Event Detection
Insert a String at a Specific Index