Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    884
    Thanks
    53
    Thanked 6 Times in 5 Posts

    compensating for no vertical scrollbar

    I realise this is a bit of a minefield, but what is the best method to centre a div on a page taking into account the appearance or not of the vertical scrollbar?

    Here is one page without a vertical scrollbar:

    Code:
    <!doctype html>
    <html>
    
    <head>
    <title>no vertical scrollbar</title>
    <style>
    body {margin: 0}
    </style>
    </head>
    
    <body>
    
    <table style="border-collapse: collapse" width="100%" height="500" bgcolor="#00FFFF">
    	<tr>
    		<td valign="top">
    		<p>&nbsp;</p>
    		<div id="yellowbox" align="center">
    			<table style="border-collapse: collapse" width="20" height="20" bgcolor="#FFFF00">
    				<tr>
    					<td>&nbsp;</td>
    				</tr>
    			</table>
    		</div>
    		<p align="center">no vertical scrollbar</p>
    		</td>
    	</tr>
    </table>
    
    </body>
    
    </html>
    ...and here is a page with the vertical scrollbar:

    Code:
    <!doctype html>
    <html>
    
    <head>
    <title>no vertical scrollbar</title>
    <style>
    body {margin: 0}
    </style>
    </head>
    
    <body>
    
    <table style="border-collapse: collapse" width="100%" height="1000" bgcolor="#00FFFF">
    	<tr>
    		<td valign="top">
    		<p>&nbsp;</p>
    		<div id="yellowbox" align="center">
    			<table style="border-collapse: collapse" width="20" height="20" bgcolor="#FFFF00">
    				<tr>
    					<td>&nbsp;</td>
    				</tr>
    			</table>
    		</div>
    		<p align="center">with vertical scrollbar</p>
    		</td>
    	</tr>
    </table>
    
    </body>
    
    </html>
    There's probably a simpler method to demonstrate this than using tables, but you can see the yellow box jumps to the left when the vertical scrollbar appears. I suppose purists will say always invoke the scrollbar, but what if you don't want to on, say, the home page only?

    I'm vaguely aware that the answer will include some method of calculating the width of the scrollbar and subtracting it and have seen a few such as:

    Code:
    function getScrollBarWidth() {
    	var inner = document.createElement('p');
    	inner.style.width = "100%";
    	inner.style.height = "200px";
     
    	var outer = document.createElement('div');
    	outer.style.position = "absolute";
    	outer.style.top = "0px";
    	outer.style.left = "0px";
    	outer.style.visibility = "hidden";
    	outer.style.width = "200px";
    	outer.style.height = "150px";
    	outer.style.overflow = "hidden";
    	outer.appendChild(inner);
     
    	document.body.appendChild(outer);
    	var w1 = inner.offsetWidth;
    	outer.style.overflow = 'scroll';
    	var w2 = inner.offsetWidth;
     
    	if (w1 == w2) {
    		w2 = outer.clientWidth;
    	}
     
    	document.body.removeChild(outer);
     
    	return (w1 - w2);
    }
    I am not certain how this method can be employed without browser sniffing. What do professionals do?
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Quote Originally Posted by tpeck View Post
    What do professionals do?
    Professionals do not suppress the scroll bar.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    884
    Thanks
    53
    Thanked 6 Times in 5 Posts
    I'm sure you're right.

    Still, if I want a particular spot on a page to stay still in both a home page without a vertical scrollbar (and without invoking it deliberately) and in another longer page or pages with a scrollbar, this seems to work for most browsers (and iPad) I have checked:

    The home page sans scrollbar:

    Code:
    <!doctype html>
    <html lang="en">
    
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Page 3</title>
    <style type="text/css">
    html{
    overflow-y:hidden;
    overflow-x:hidden;
    }
    body{
    margin-top:28px;
    }
    </style>
    <script>
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || (navigator.appVersion.indexOf("Mac")!=-1) ) {
    document.write("<style>body{margin-left:24px;}<\/style>");
    }
    </script>
    
    <body>
    
    <div align="center">
    	<table style="border-collapse: collapse" width="674" height="500" bgcolor="#00FFFF" cellpadding="0">
    		<tr>
    			<td valign="top">
    			<div id="yellowbox">
    				<table style="border-collapse: collapse" width="20" height="20" bgcolor="#FFFF00">
    					<tr>
    						<td>&nbsp;</td>
    					</tr>
    				</table>
    			</div>
    			</td>
    		</tr>
    	</table>
    </div>
    
    </body>
    
    </html>
    ... and another page with vertical scrollbar:

    Code:
    <!doctype html>
    <html lang="en">
    
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Page 4</title>
    <style type="text/css">
    body {
    margin-top:20px;
    }
    </style>
    </head>
    
    <body>
    
    <div align="center">
    	<table style="border-collapse: collapse" width="674" height="1000" bgcolor="#00FFFF" cellpadding="8">
    	<tr>
    		<td valign="top">
    		<div id="yellowbox">
    			<table style="border-collapse: collapse" width="20" height="20" bgcolor="#FFFF00">
    				<tr>
    					<td>&nbsp;</td>
    				</tr>
    			</table>
    		</div>
    		</td>
    	</tr>
    </table>
    </div>
    
    </body>
    
    </html>
    It's just manipulating the position of the yellow box, then adjusting with the js for different browsers, the iPad and the Mac.

    Clunky, but better than having the yellow box jumping about. I suppose forcing the vertical scrollbar on the home page is easier, but that looks wrong on a clean page sometimes, and no scrollbar is the default after all.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,915
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Just note that the scrollbar isn’t necessarily what it used to be all these years. With the advent of touch-enabled devices “scrollbars” in some OSs/browsers have reduced to just an indicator where on a page one is at the moment which appears only when someone is actually performing a scroll action, and which takes no space away from the viewport as it’s merely superimposed on the page viewed. Even with pointing devices that feature a scrollwheel or finger scroll gestures the scrollbar is often initially hidden in the browser and only draggable when hovering over it while it’s visible, and even then it’s not having any impact on the viewport size, and therefore no page jump occurs at all.

    So, in a nutshell: that “jumping” you notice is nothing actually worth worrying about. Either the scrollbar will or won’t be there at all (because people often keep the viewport size they already have), or the scrollbar doesn’t have any impact on the viewport size, or no one will notice anyway, or if they notice they might not take any offense in it jumping once. This is a typical designers’/developers’ issue because they notice it while developing, but to the masses this is a non-issue.
    Last edited by VIPStephan; 08-26-2014 at 03:46 PM.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    you should set the scrollbar to appear all the time for consistency, that's what the designers at my work do, and by definition they are professionals (and good to boot).
    Code:
    body { overflow: auto; overflow-y: scroll; }
    yeah, it's a bit of "wasted space", but it's invisible to most users. the jumping is noticeable to most users, so they figure the horizontal real estate trade-off is worth it to avoid a glitchy-looking site.

    also, don't try to compensate for the scrollbar width, that only makes it worse because OS font size, themes, and accessibility settings can all vary the allotted width of scroll bars, and doing a wrong measurement (even by a few pixels) can wreak re-layout havoc on an otherwise stable design.
    Last edited by rnd me; 08-27-2014 at 09:33 PM.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%


  •  

    Posting Permissions

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