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 */
}
});
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 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
}
I have this jsfiddle: https://jsfiddle.net/3ncyxnzt/
It currently works well as far as always stopping at a specified margin from the top of the page, but I'd like to make it also stop at the bottom, before it goes under/over the footer. Any ideas on how to make that moving red box stop right above the green footer? The height of the footer is 1000px, so I'd somehow need to set the moving box to stop at 1000px from the bottom.
Here's the code I have so far:
(function(jQuery) {
var element = jQuery('.move'),
originalY = element.offset().top;
var topMargin = 110;
element.css('position', 'relative');
jQuery(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
element.stop(false, false).animate({
top: scrollTop < originalY
? 0
: scrollTop - originalY + topMargin
}, 200);
});
})(jQuery);
I modified following line by adding static value 290 and it reached to bottom.
scrollTop - originalY + topMargin + 290
Is this what you trying to achive?
(function(jQuery) {
var element = $('.move'),
originalY = element.offset().top,
otherDiv = 1000,
staticHeight = $('.other-div').height()-$(element).height(); // Fixed number to stop the move-element before the footer
var topMargin = 110;
jQuery(window).on('scroll', function(event) {
var offset = element.offset().top;
var scrollTop = $(window).scrollTop();
// Check if the move-block gets under the footerblock
if(scrollTop < otherDiv){
element.stop(false, false).animate({
top: scrollTop - originalY + topMargin
}, 200);
}else{
element.stop(false, false).animate({
top: staticHeight //If so, make sure it gets on top of the footerblock staticly
}, 200);
}
});
})(jQuery);
I think you need an if/else statement to check if the block gets behind the height of the div called "other-div".
See the working example here: https://jsfiddle.net/crix/z578c9bo/
Hope it helps!
I am implementing my own horizontal scrolling with controls (left/right)
How can I find how much scrolling I got to the right?
My code is as follows:
$scope.scrollFilters = function(dir) {
var leftPos = $('.filters').scrollLeft();
var containerWidth = $('.filters').width();
var scrollTo = 0;
if (dir == 'right') {
scrollTo = leftPos + scrolled >= containerWidth ? containerWidth : leftPos + scrolled;
} else {
scrollTo = leftPos - scrolled <= 0 ? 0 : leftPos - scrolled;
}
$('.filters').animate({
scrollLeft: scrollTo
});
};
What I'm interested in is getting the actual $('.filters').width(). At the moment it would just return the width I set up in the CSS, I want to get the actual width if I wouldn't limit the div in width.
P.S. its an AngularJS application, but don't think it does me any good this time.
Thanks for the help!
you should try and grab its max width
var theWidth = Math.max.apply(null, $(".filters").map(function() {
return $(this).outerWidth(true);
}).get());
If there is scroll, it means that an inner element is bigger than an outer element, so you should calculate the difference between the inner width (bigger) and the outer width (smaller) or their heights.
This may help you as you have to apply the same concept: How to get maximum document scrolltop value
How will you determine if you have reached the bottom of an element? For instance you have a div with a height of 2000px, then the viewport is only 600px tall. With these in place, how will you know how much scroll value you need to know if it's already the bottom of the 2000px div?
You can use something like this:
var $element = $('div');
$(window).scroll(function() {
var scroll = $(window).scrollTop() + $(window).height();
var offset = $element.offset().top + $element.height();
if (scroll > offset) {
$element.css('background', 'blue');
} else {
$element.css('background', 'red');
}
});
Demo: http://jsfiddle.net/eNjEs/5/