SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Location
    Peabody, MA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Detecting a Vertical Scrollbar

    Hello,

    I would like to check in window.onload; and window.onresize;
    to see if the page that I am loading, or resizing is displaying a vertical scrollbar.

    I have been looking:
    I found many about comparing window.innerHeight to document.height
    and a hundred variations.

    Many like:
    if (document.getElementById('divID').scrollHeight >
    document.getElementById('divID').clientHeight)
    {
    //a scroll bar is present
    }

    I cannot seem to get one that works.


    I am using IE8 but would like to cover most common browsers.

    Can someone point me to a solution?

    Thanks,

    Raney

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You can force the page to always show the vertical scroll bar as follows:
    body { height:100.1%; }

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Location
    Peabody, MA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Allen,

    I am not trying to force the scrollbar just check to see if the page already has one.

    If its a short page, no scrollbar will be present, if its a long page then it will be.

    The same page might have one at 1024x768 but not have it at 1280x1024.

    I would just like to see if it is present at load time.

    Raney

  4. #4
    SitePoint Member
    Join Date
    Mar 2011
    Location
    Peabody, MA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have been trying to compare combinations of:
    element clientWidth/Height, offsetWidth/Height, scrollWidth/Height and trying to get around
    window innerWidth/Height, outerWidth/Height.

    Nothing really seemed to work.

    This seems to work until I find something better.


    window.onload = testScroll;

    function testScroll()
    {
    var element = document.getElementById('pageDefault');
    var height = element.style.height;
    var clientWidth = document.body.clientWidth;

    element.style.height = "101%";
    if (document.body.clientWidth < clientWidth)
    {
    alert("not scrolled");
    }
    else
    {
    alert("scrolled");
    };
    element.style.height = height;
    }


    Thanks,

    Raney

  5. #5
    SitePoint Member
    Join Date
    Mar 2011
    Location
    Peabody, MA
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The more that I think about the solution in my last posting, the less I like it.

    The changing clientWidth is a symptom of the scrollbar not the cause of it.

    There has to be a simple solution using standard DOM height related properties
    that will work.

    I will start with a clean slate and look at this again today.

    Raney

  6. #6
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function verticalScroll(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;
    }
    alert(verticalScroll())


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •