I am trying to detect when an user has scroll to the very bottom of the page.
The solution that I end up with is the following
var windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
var body = document.body, html = document.documentElement;
var docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
var windowBottom = windowHeight + window.pageYOffset;
if (windowBottom >= docHeight) {
// Bottom is reached
}
I am confused why this works
From the documentation, innerheight is the height of the view portal, and pageYoffset is the amount of scroll that we make.
So in order to detect scroll to bottom, shouldn't I check if pageYOffset >= documentHeight ?
Why do I have to add innerheight?
This has nothing to do with Angular. This is how all browsers work.
Your pageYOffset is never going to be greater than the document height since it represents the top of the viewport. In order for pageYOffset to be equal to the document height, you'd have to scroll past the end of the page.
The maximum pageYOffset can be is the docHeight - window.innerHeight. So your check could be:
if (pageYOffset >= docHeight - window.innerHeight) {
// Bottom is reached
}
Related
Please help me out here, if bottom of div or full div is visible then i want to scroll to down of next div. Here the code i have tried out,
Mathematically,
var top = $("#myDiv").offset().top;
//top = 1863
var divHeight = $("#myDiv").height();
//divHeight = 571
var total = top + divHeight;
//total = 2434
if($('#myDiv').css('height',total).visible(true))
{
alert('hi');
// I need to alert only if the full div is visible not some part of div
}
else
{
//if height of myDiv is larger window height (my screen height 640 pixels)
}
If all this part of html(from top to divHeight) or bottom of page(here total value) is visible then i need to scroll to next div.
Please note :- the code inside if conditional statement is not correct, i think you got some idea from that.
Given element the jQuery object you want to check, element is fully visible if it is shown and all of the 4 sides of its layout box fall within the window viewport.
Caution: the following solution assumes that there are no element with scrollable overflow between element and the document root, otherwise the calculation becomes way more complicated.
function isFullyVisible(element) {
var offset = element.offset();
var scrollTop = $(document).scrollTop();
var scrollLeft = $(document).scrollLeft();
return element.is(":visible") && // shown
offset.top >= scrollTop && // top
offset.left >= scrollLeft && // left
offset.top + element.outerHeight() <= scrollTop + $(window).height() && // bottom
offset.left + element.outerWidth() <= scrollLeft + $(window).width(); // right
}
If you don't care of sides, you can keep only the corresponding sub-expression.
I'm trying to interpolate a percentage as an element moves through the window as you scroll.
Basically, when the top of the element meets the bottom of the window, that returns 0%. When the bottom of the element meets the top of the window, that returns 100%.
So far I can interpolate using the middle of the element, but I can't figure out how to get it to start at the top and bottom instead of the middle.
Heres a Demo
$(document).ready(()=>{
//Element Vars - Test for Element 3
const $interpolateTarget = $('#element3');
const elementH = $interpolateTarget.height();
const elementY = $interpolateTarget.offset().top;
//Window Vars
const windowH = $(window).height()
let scrollY;
let interpolation;
let middlePoint;
$(window).scroll((event)=>{
scrollY = $(window).scrollTop()
pctOfWindow = elementH / windowH
//Calculate middle of element and compare to middle of window
middleY = elementH / 2 + elementY - scrollY
windowMiddleY = windowH / 2
interpolation = middleY / windowMiddleY / 2
//Convert to percentage and reverse
interpolation = (interpolation * 100 - 100 ) * -1
updateInfo(scrollY, interpolation);
})
})
Any Help would be greatly appreciated, thanks!
I think you need to consider the document height instead of the window height. The following may help you.
updateInfo(scrollY, 100 * $(document).scrollTop() / ($(document).height() - $(window).height()));
$(document).scrollTop() : how much is scrolled in the entire document
$(document).height() : actual document height
$(document).height() - $(window).height() : scrollable document height
Seems I figured it out, changed elementH / 2 + elementY - scrollY to elementH + elementY - scrollY
This question already has answers here:
Cross-Browser Method to Determine Vertical Scroll Percentage in Javascript
(14 answers)
Closed 2 years ago.
The problem:
What would be the mathematical formula to calculate (regardless of the
scrollHeight of the document) how far the bottom of the scrollbar is from it's total bottom (which would be the end of the page). So, for example, when the scrollbar is at the top, I would say the distance in percentages of the bottom of it, from the bottom of the document, would be 0%, and when it's totally scrolled all the way (vertically), it would be 100%.
My goal:
My goal is to calculate how many pixels there are between the bottom and a specific position which is, let's say 3%, relative to the viewport, above that bottom. Again, the document height should mean nothing. 3% are 3% if it's relative to the viewport.
Known variables:
var P = 3 // in %
var totalHeight = document.documentElement.scrollHeight;
var viewportHeight = document.documentElement.clientHeight;
Returns a number between 0 to 100 relative to scroll position:
document.onscroll = function(){
var pos = getVerticalScrollPercentage(document.body)
document.body.innerHTML = "<span>" + Math.round(pos) + "%<span>"
}
function getVerticalScrollPercentage( elm ){
var p = elm.parentNode
return (elm.scrollTop || p.scrollTop) / (p.scrollHeight - p.clientHeight ) * 100
}
body{ height:2000px }
span{ position:fixed; font:5em Arial; color:salmon; }
● Difference between scrollHeight & clientHeight
When you scroll to the bottom, the final position value is equal to the height of your document minus the height of one screen (viewport). So if you compute:
scrollPositionRelative = scrollPosition / (documentHeight - viewportHeight);
The values will be in the range 0-1 as expected.
Here's the function used in the example given at the end.
function getScrollPosition () {
var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); // Viewport height (px)
var scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // Current scroll position (px)
var documentHeight = $(document).height(); // Document height (px)
var scrollPositionRelative = scrollPosition / (documentHeight - viewportHeight); // The document height is reduced by the height of the viewport so that we reach 100% at the bottom
return {
documentHeight: documentHeight,
relative: scrollPositionRelative,
absolute: scrollPositionRelative * documentHeight // Yields an "average" pixel position
};
}
See it in action: http://jsbin.com/tawana/1/
In my jquery I am trying to calculate when the scrollbar is 100px from the bottom, and when it gets there I will do an ajax query (for now I am doing an alert as you can see).
$(document).on("scroll", function(e){
var scrollHeight = $(document).height();
var offset = $(document).scrollTop();
console.log(scrollHeight);
console.log(offset);
if(scrollHeight - offset <= 100){
alert("here");
}
});
For some reason that I can not figure out it doesn't work. If I scroll to the bottom I would assume that the height() would equal scrollTop() but it doesn't, and here is what it shows:
scrollHeight = 1923
offset = 998
Am I using the wrong methods for this?
You need to add the height of the window with scrollTop. Link
$(document).on('scroll', function () {
var docHeight = $(document).height(),
scrollTop = $(document).scrollTop(),
windowHeight = $(window).height();
if (docHeight - (scrollTop + windowHeight) <= 100) {
alert(docHeight - (scrollTop + windowHeight));
}
});
Looks like you might be forgetting to subtract the pane's view-able height. I've done something similar in my code here:
var scrollPos = $('#viewable-div').height() - $('#scrolling-content').height();
if ($("#scrolling-content").scrollTop() > (scrollPos - 100)) {
//load more
}
When you scroll the element all the way down, scrollHeight should be equal to scrollTop + clientHeight.
If the element has no scrollbars scrollWidth/Height should be equal to clientWidth/Height.
• When the element has no scrollbars IE makes the scrollHeight equal to the actual height of the content; and not the height of the element. scrollWidth is correct, except in IE8, where it’s 5 pixels off.
• Opera gives odd, incorrect values.
You can use a statement like this
((container.scrollTop() + container.height() + detectionOffset) >=
container.get(0).scrollHeight)
Where container could be the document.body and detectionOffset would be 100
This has been answered a few times before, including here
One piece of code that I'm using and is always working (even on Opera) is this:
$(window).on("scroll", function () {
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
/* Do something */
}
});
Is this possible? Use of jQuery is also available.
You've said "browser height" both in the question and, when asked to clarify, in the comments on the question.
The answer is: No, it isn't possible to find out the height of the browser window. But then, 99.99999% of the time, you don't care.
You can find out:
The height of the displayed area of the page (the viewport) via $(window).height(); more
The height of the document as a whole (which can be shorter or taller than the viewport) via $(document).height() (same link)
And usually even the height of the user's screen (via window.screen.height)
None of these gives you the height of the browser window, though.
The following code sets the variables winW and winH to the inner width and height of the browser window, and outputs the width and height values. If the user has a very old browser, then winW and winH are set to 630 and 460, respectively.
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
document.writeln('Window width = '+winW);
document.writeln('Window height = '+winH);
taken from here
You can ofcourse substract/add/multiply/whatever you want before printing the values.
You either need:
$(window).height();//viewport
OR
$(document).height();//complete document
OR
window.screen.height;//screen resolution height
It returns an integer value, so you can do calculations on it
alert( $(window).height() - 100 );
height() is what you are looking for..
http://api.jquery.com/height/
var heght= $(window).height(); //this gives you the height of the window
alert(heght - 50);
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
You may also use:
document.body.clientHeight
You should look for height function of Jquery like this
$(window).height() or $(document).height()
and for subtracting pixels just use $(window).height()-5
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
) - mynumber ;
}
If the actual document’s body height is less than the viewport height then it will return the viewport height instead.
And jQuery Method:
$.getDocHeight = function(){
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
alert( $.getDocHeight() - mynumber);