Menu
(Hope it is not a duplicate because I didn't find it when searching and googling)
I am trying to find how to detect in some fixed-height div ('#div') when the scroll-bar is reaching the bottom of this latter div. Should I use $(document).height() and $(window).height() to detect this event ?
Edit : My div which is fixed-height and about which I set auto-scroll, so how to deal with that ? if I am suppose to use $('#div').height(), this height is fixed....
321
The height property returns the total height of the user's screen.
height() method is recommended when an element's height needs to be used in a mathematical calculation. This method is also able to find the height of the window and document. $( document ). height();
Use window. innerWidth and window. innerHeight to get the current screen size of a page.
Getting the Height of a Document To get the height of a document, we can get the max of the scrollHeight , offsetHeight , or clientHeight properties. The document can be stored in the document. body or document. documentElement properties depending on the browser used.
In the .height() documentation:
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
In your case it sounds like you may want the height of the document rather than the window. Think of it this way: The window height is what you see, but the document height includes everything below or above.
EXAMPLE
EDIT:
Checking for top and bottom on scroll with help from the scrollTop() method:
var bottom = $(document).height() - $(window).height();
$(document).scroll(function(){
var position = $(this).scrollTop();
if (position === bottom) {
console.log("bottom");
}else if(position === 0){
console.log("top");
} else {
console.log("scrolling");
}
});
Difference between $(window).height() and $(document).height() function.
$(window).height() function:
Ideally $(window).height() returns the pixel less height of browser window. This is always the height of current browser window. If you resize browser this value should change.
$(document).height() function: $(document).height() returns an unit-less pixel value of the height of the document being rendered.
In HTML if you dont declare DOCTYPE then all time HTML page returns $(window).height() and $(document).height() same value.
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#winheight').text($(window).height());
$('#docheight').text($(document).height());
});
</script>
</head>
<body>
<div id="console">
$(window).height() = <span id="winheight"></span> <br/>
$(document).height() = <span id="docheight"></span>
</div>
<p>Lorem ipsum dolor sit amet</p>
</body>
</html>
Output :
$(window).height() = 750
$(document).height() = 750
Lorem ipsum dolor sit amet
After declare DOCTYPE its returns perfect value.
<!DOCTYPE HTML>
<html>
write above code here
</html>
Output :
$(window).height() = 750
$(document).height() = 750
Lorem ipsum dolor sit amet
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
