Rectangle 27 203

You can extract the scroll position using jQuery's .scrollTop() method

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    // Do something
});

but how can you do that ?

Listening to window scroll isn't bad in and of itself. It's when people try to do things on each firing of that event that trouble occurs. If you only do something like set a variable's value to the current scroll position, or to true/false, and then make use of those outside the event, you should generally be golden.

You should consider debouncing when working with this kind of events. See davidwalsh.name/javascript-debounce-function

javascript - How to detect scroll position of page using jQuery - Stac...

javascript jquery scroll
Rectangle 27 80

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($("body").height() > $(window).height()) {
        alert("Vertical Scrollbar! D:");
    }

    // Check if body width is higher than window width :)
    if ($("body").width() > $(window).width()) {
        alert("Horizontal Scrollbar! D:<");
    }
});

+1 but for the sake of exactness, this only checks whether the content expands further than the viewport. If the overflow property of the body is set to hidden somewhere along the line, it won't work. Setting hidden on a body is extremely rare, though.

This does not work if the body height matches the window height, which is the case if the doc height matches the viewport exactly then a horizontal scrollbar is added. It will force vert. scrollbar but doc/body/window height are the same; it will NOT alert "vertical scrollbar" even tho there is one.

@sequoiamcdowell simply add a >= and problem solved.

Just thought I'd mention that I had to use $(document) instead of $("body"), this worked for me when body didn't (I have an absolute positoned container with an aspect ratio on width/height)

I have report page on Chrome browser where it initially displays a scroll bar and vanishes in a matter of milliseconds which looks like a browser behaviour since I did not programme it. So this function return true always in my case..

javascript - Detect if a page has a vertical scrollbar? - Stack Overfl...

javascript jquery scroll
Rectangle 27 95

You are looking for the window.scrollTop() function.

$(window).scroll(function() {
    var height = $(window).scrollTop();

    if(height  > some_number) {
        // do something
    }
});

I think there is one extra space in the if statement before the greater than symbol. It causes a javascript error.

javascript - How to detect scroll position of page using jQuery - Stac...

javascript jquery scroll
Rectangle 27 35

document.addEventListener('scroll', function (event) {
    if (document.body.scrollHeight == 
        document.body.scrollTop +        
        window.innerHeight) {
        alert("Bottom!");
    }
});

This code does not work on all browsers - here is a complete solution synthesized from several sources (URLs in the code): jsfiddle.net/W75mP

what browser dont support this? do you know about mobile?

javascript - Detect when Scroll reaches the BOTTOM of the page [ witho...

javascript scroll
Rectangle 27 34

document.addEventListener('scroll', function (event) {
    if (document.body.scrollHeight == 
        document.body.scrollTop +        
        window.innerHeight) {
        alert("Bottom!");
    }
});

This code does not work on all browsers - here is a complete solution synthesized from several sources (URLs in the code): jsfiddle.net/W75mP

what browser dont support this? do you know about mobile?

javascript - Detect when Scroll reaches the BOTTOM of the page [ witho...

javascript scroll
Rectangle 27 61

var hasVScroll = document.body.scrollHeight > document.body.clientHeight;

This will only tell you if the vertical scrollHeight is bigger than the height of the viewable content, however. The hasVScroll variable will contain true or false.

If you need to do a more thorough check, add the following to the code above:

// Get the computed style of the body element
var cStyle = document.body.currentStyle||window.getComputedStyle(document.body, "");

// Check the overflow and overflowY properties for "auto" and "visible" values
hasVScroll = cStyle.overflow == "visible" 
             || cStyle.overflowY == "visible"
             || (hasVScroll && cStyle.overflow == "auto")
             || (hasVScroll && cStyle.overflowY == "auto");

+1 Nice! And with the necessary computed style (which was the point at which I decided not to get involved with this question ;)

lol yeah I was debating whether or not to make the extra effort to write it because in many cases it's not needed.

This results in hasVScroll being true whenever overflowY is 'visible' regardless of whether the scrollHeight is greater than the clientHeight. Maybe you meant cStyle.overflow === 'scroll'?

@BT cStyle.overflow == "visible" can show scroll bars when the element is the document.body. But it should be (hasVScroll && cStyle.overflow == "visible" && element.nodeName == "BODY") . Plus it needs to check for cStyle.overflow === 'scroll' as you point out.

javascript - Detect if a page has a vertical scrollbar? - Stack Overfl...

javascript jquery scroll
Rectangle 27 37

I tried the previous answer and doesn't seem to be working the $("body").height() does not necessarily represent the whole html height.

I have corrected the solution as follows:

// Check if body height is higher than window height :) 
if ($(document).height() > $(window).height()) { 
    alert("Vertical Scrollbar! D:"); 
} 

// Check if body width is higher than window width :) 
if ($(document).width() > $(window).width()) { 
    alert("Horizontal Scrollbar! D:<"); 
}

javascript - Detect if a page has a vertical scrollbar? - Stack Overfl...

javascript jquery scroll
Rectangle 27 30

function getData() {
    $.getJSON('Get/GetData?no=1', function (responseText) {
      //Load some data from the server
    })
};

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
       // getData();
   }
});

javascript - How to detect scroll position of page using jQuery - Stac...

javascript jquery scroll
Rectangle 27 14

Let's bring this question back from the dead ;) There is a reason Google doesn't give you a simple solution. Special cases and browser quirks affect the calculation, and it is not as trivial as it seems to be.

Unfortunately, there are problems with the solutions outlined here so far. I don't mean to disparage them at all - they are great starting points and touch on all the key properties needed for a more robust approach. But I wouldn't recommend copying and pasting the code from any of the other answers because

  • they don't capture the effect of positioned content in a way that is reliable cross-browser. The answers which are based on body size miss this entirely (the body is not the offset parent of such content unless it is positioned itself). And those answers checking $( document ).width() and .height() fall prey to jQuery's buggy detection of document size.
  • Relying on window.innerWidth, if the browser supports it, makes your code fail to detect scroll bars in mobile browsers, where the width of the scroll bar is generally 0. They are just shown temporarily as an overlay and don't take up space in the document. Zooming on mobile also becomes a problem that way (long story).
  • The detection can be thrown off when people explicitly set the overflow of both the html and body element to non-default values (what happens then is a little involved - see this description).
  • In most answers, body padding, borders or margins are not detected and distort the results.

I have spent more time than I would have imagined on a finding a solution that "just works" (cough). The algorithm I have come up with is now part of a plugin, jQuery.isInView, which exposes a .hasScrollbar method. Have a look at the source if you wish.

In a scenario where you are in full control of the page and don't have to deal with unknown CSS, using a plugin may be overkill - after all, you know which edge cases apply, and which don't. However, if you need reliable results in an unknown environment, then I don't think the solutions outlined here will be enough. You are better off using a well-tested plugin - mine or anybody elses.

Thanks. Quite a bit complicated! If you don't want to/need to be backward compatible is there perhaps an easier solution for html5 browsers? I mean perhaps the browser coders/w3c have been nice enough to just tell us if there are scrollbars or not on an element? ;-)

@Leo Not that I am aware of. Well, there is a window.scrollbars object which has a single property, visible. Sounds promising but isn't. It is not supported in IE, including IE11. And it just tells you that there is a scroll bar - but not which one. See the test page here.

Thanks @hashchange. It sounds incredible stupid that it just tells if there is any scrollbar so I guess it is just some kind of test yet. A bit promising though. ;-)

@BT Ok, great. Now let me lead you to the entrance of the rabbit hole ;) Here's a demo where the content is not enough to fill the window. Your detection works in FF but fails in Chrome. And here's another demo where a positioned element is placed far down the page. Your detection works in Chrome but fails in FF.

@BT And I guess we can get into a bunch of weird failure modes when we begin to play with overflow settings because their behaviour is a little odd, but I've stopped right there.

javascript - Detect if a page has a vertical scrollbar? - Stack Overfl...

javascript jquery scroll
Rectangle 27 12

function hasVerticalScroll(node){
    if(node == undefined){
        if(window.innerHeight){
            return document.body.offsetHeight> innerHeight;
        }
        else {
            return  document.documentElement.scrollHeight > 
                document.documentElement.offsetHeight ||
                document.body.scrollHeight>document.body.offsetHeight;
        }
    }
    else {
        return node.scrollHeight> node.offsetHeight;
    }
}
hasVerticalScroll()

javascript - Detect if a page has a vertical scrollbar? - Stack Overfl...

javascript jquery scroll
Rectangle 27 8

var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;

javascript - Detect if a page has a vertical scrollbar? - Stack Overfl...

javascript jquery scroll
Rectangle 27 4

$(window).scroll( function() { 
 var scrolled_val = $(document).scrollTop().valueOf();
 alert(scrolled_val+ ' = scroll value');
});

This is another way of getting the value of scroll.

javascript - How to detect scroll position of page using jQuery - Stac...

javascript jquery scroll
Rectangle 27 1

I would use an extra div that is positioned outside the screen and has the exact same content as your page div (you should keep this updated). The only difference is that the extra div has no "overflow:hidden".

Now, check whether there is a difference in height between the two divs, and if so, there is overflown content!

Thanks for the help.But i think keep a exact copy of each page div is a little bit efficiency unfriendly.

You don't have to keep it. Just fill it when you need it and discard it after that. You only need the div when you need to check sizes... If you don't mind a possible little flicker, you could even just for a tiny moment remove the "overflow:hidden;" on the original div, check sizes and then immediately change it back again.

javascript - is there a way to fire a event when vertical overflow is ...

javascript html css pagination
Rectangle 27 13

If there is an on-screen keyboard, focusing a text field that is near the bottom of the viewport will cause Safari to scroll the text field into view. There might be some way to exploit this phenomenon to detect the presence of the keyboard (having a tiny text field at the bottom of the page which gains focus momentarily, or something like that).

That's an ingenious idea. I found a similar solution that also uses the current scroll position to detect the virtual keyboard.

iphone - iPad Web App: Detect Virtual Keyboard Using JavaScript in Saf...

javascript iphone ipad safari web-applications
Rectangle 27 2

This is working for me in IE

document.onscroll = function() {
    if(document.documentElement.scrollTop + window.innerHeight == document.documentElement.scrollHeight)
    {
        alert('bottom');
    }
}

javascript - Detect when Scroll reaches the BOTTOM of the page [ witho...

javascript scroll
Rectangle 27 2

document.onscroll = function() {
    if(!document.body.scrollTop){
        alert('top');
    }
}

This works in IE 8 ?

I would prefer .addEventListener('scroll', ...) over .onscroll = ..., for the additional flexibility and avoiding colliding with other event handlers. Unfortunately this doesn't work in IE8, but it's easy enough to polyfill.

@Tomirammstein I posted a jsfiddle demo - I don't have access to IE8 but scrollTop originated in MSIE so it should work.

But I need to detect when the scroll reaches the bottom of the page

javascript - Detect when Scroll reaches the BOTTOM of the page [ witho...

javascript scroll
Rectangle 27 2

document.onscroll = function() {
    if(!document.body.scrollTop){
        alert('top');
    }
}

This works in IE 8 ?

I would prefer .addEventListener('scroll', ...) over .onscroll = ..., for the additional flexibility and avoiding colliding with other event handlers. Unfortunately this doesn't work in IE8, but it's easy enough to polyfill.

@Tomirammstein I posted a jsfiddle demo - I don't have access to IE8 but scrollTop originated in MSIE so it should work.

But I need to detect when the scroll reaches the bottom of the page

javascript - Detect when Scroll reaches the BOTTOM of the page [ witho...

javascript scroll
Rectangle 27 2

This is working for me in IE

document.onscroll = function() {
    if(document.documentElement.scrollTop + window.innerHeight == document.documentElement.scrollHeight)
    {
        alert('bottom');
    }
}

javascript - Detect when Scroll reaches the BOTTOM of the page [ witho...

javascript scroll
Rectangle 27 2

<script>
    var scrollHeight = document.body.scrollHeight;
    var clientHeight = document.documentElement.clientHeight;
    var hasVerticalScrollbar = scrollHeight > clientHeight;

    alert(scrollHeight + " and " + clientHeight); //for checking / debugging.
    alert("hasVerticalScrollbar is " + hasVerticalScrollbar + "."); //for checking / debugging.
    </script>

This one will tell you if you have a scrollbar or not. I've included some information that may help with debugging, which will display as a JavaScript alert.

Put this in a script tag, after the closing body tag.

javascript - Detect if a page has a vertical scrollbar? - Stack Overfl...

javascript jquery scroll
Rectangle 27 2

var hasScrollbar = function() {
  // The Modern solution
  if (typeof window.innerWidth === 'number')
    return window.innerWidth > document.documentElement.clientWidth

  // rootElem for quirksmode
  var rootElem = document.documentElement || document.body

  // Check overflow style property on body for fauxscrollbars
  var overflowStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowStyle = rootElem.currentStyle.overflow

  overflowStyle = overflowStyle || window.getComputedStyle(rootElem, '').overflow

    // Also need to check the Y axis overflow
  var overflowYStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowYStyle = rootElem.currentStyle.overflowY

  overflowYStyle = overflowYStyle || window.getComputedStyle(rootElem, '').overflowY

  var contentOverflows = rootElem.scrollHeight > rootElem.clientHeight
  var overflowShown    = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle)
  var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll'

  return (contentOverflows && overflowShown) || (alwaysShowScroll)
}

Fixed it. This same function works for IE 11 too. The issue was this - stackoverflow.com/questions/17045132/

javascript - Detect if a page has a vertical scrollbar? - Stack Overfl...

javascript jquery scroll