Scrollbars in Firefox. Halp?! Let's break the rules.

Discuss how to write good code, break bad code, your current pet projects, or the best way to approach novel problems

Re: Scrollbars in Firefox. Halp?! Let's break the rules.

Post by computerbp13 on Thu Jul 01, 2010 8:43 am
([msg=41121]see Re: Scrollbars in Firefox. Halp?! Let's break the rules.[/msg])

The solution is simple, though it requires JavaScript. When javascript isn't available the browser's default scroll bar will be used.
The concept is even simpler. Wrap your entire content in a div and set it to overflow: hidden. Then create your scrollbar in another div and place it along the side of the page. Sample:

Code: Select all
<!doctype html>
<html>
<head>
<title>Scrollbar Replacement Demo</title>
<script>
document.write('<style>
                  body { margin: 0; padding: 0; }
                  #maincontent { height: 100%; overflow: hidden; width: 100%; }
                  #scrollbar { bottom: 0; position: absolute; right: 0; top: 0; width: 17px; }
                </style>');
//Insert scrollbar code here (look into the scrollTop and scrollHeight for DOM elements (specifically #maincontent)
</script>
</head>
<body>
<div id="maincontent">
<!-- Main Content here -->
</div>
<div id="scrollbar">
<!-- HTML Scrollbar goes here -->
</div>
</body>
</html>

This is typically how scrollbars are customized on a page. Simply apply this strategy to the whole page and you can simulate your own scrollbar.
Hope this helps!
computerbp13
New User
New User
 
Posts: 9
Joined: Fri Jul 04, 2008 12:24 pm
Blog: View Blog (0)


Previous

Return to Programming

Who is online

Users browsing this forum: No registered users and 0 guests