Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Help with scroll bars

Z

Zanthus

macrumors member
Original poster
Aug 19, 2009
38
0
Reading, Uk
Hi guys,

I have a div with rounded corners and want to put a scroll bar inside the div. But when I use the overflow the scroll bar appears on the outside of the div so one side of the div is square.

I would really like a scrollbar like this one

http://livepipe.net/control/scrollbar

but can't seem to implement it and cant find any others like it on the web.

any suggestions would be great

thanks
 
Here's a quick example. The border radius is currently setup only for Mozilla-based browsers, but you can add to it for other browsers.
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Inner Scrollbar Example</title>
<style type="text/css">
#scroll1 {
	padding: 10px 0 10px 10px;
	width: 200px;
	height: 300px;
	background: #000;
	color: #fff;
	-moz-border-radius: 5px;
}
#scroll2 {
	width: 100%;
	height: 100%;
	background: #000;
	overflow: auto;
}
</style>
</head>
<body>
<div id="scroll1">
	<div id="scroll2">
	egeet eth4h4t 4354355 g35353 tryujg 3e5r y54grew yt3 ery35 6 w43 35 y3 g35t5yu54 w46 553 y3 g3 y5
	egeet eth4h4t 4354355 g35353 tryujg 3e5r y54grew yt3 ery35 6 w43 35 y3 g35t5yu54 w46 553 y3 g3 y5
	egeet eth4h4t 4354355 g35353 tryujg 3e5r y54grew yt3 ery35 6 w43 35 y3 g35t5yu54 w46 553 y3 g3 y5
	egeet eth4h4t 4354355 g35353 tryujg 3e5r y54grew yt3 ery35 6 w43 35 y3 g35t5yu54 w46 553 y3 g3 y5
	egeet eth4h4t 4354355 g35353 tryujg 3e5r y54grew yt3 ery35 6 w43 35 y3 g35t5yu54 w46 553 y3 g3 y5
	egeet eth4h4t 4354355 g35353 tryujg 3e5r y54grew yt3 ery35 6 w43 35 y3 g35t5yu54 w46 553 y3 g3 y5
	egeet eth4h4t 4354355 g35353 tryujg 3e5r y54grew yt3 ery35 6 w43 35 y3 g35t5yu54 w46 553 y3 g3 y5
	egeet eth4h4t 4354355 g35353 tryujg 3e5r y54grew yt3 ery35 6 w43 35 y3 g35t5yu54 w46 553 y3 g3 y5
	</div>
</div>
</body>
</html>
 

Attachments

  • mr-scroll.gif
    mr-scroll.gif
    10.5 KB · Views: 571
Thanks for that, thats a great help but is there anyway of customising the actual scroll bar so that it blends in more ? What I really what is just a scroll button where you cant actually see the bar

thanks
 
Zanthus said:
Thanks for that, thats a great help but is there anyway of customising the actual scroll bar so that it blends in more ? What I really what is just a scroll button where you cant actually see the bar

thanks
Click to expand...

That would require JavaScript. You would use CSS to hide the sight of the scrollbar, then use JavaScript to set the position of the hidden scrollbar. Off-hand I don't know of any implementations, but I would search on "javascript powered scrollbar" or something similar.
 
As a general statement, customizing scroll bars is an awful idea from a UI/UX standpoint. As mobile computing becomes more and more important, this is going to become more of an issue, not less.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back