Help with scroll bars

Discussion in 'Web Design and Development' started by Zanthus, Feb 17, 2011.

  1. Zanthus macrumors member

    Joined:
    Aug 19, 2009
    Location:
    Reading, Uk
    #1
    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
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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 {
        
    padding10px 0 10px 10px;
        
    width200px;
        
    height300px;
        
    background#000;
        
    color#fff;
        
    -moz-border-radius5px;
    }
    #scroll2 {
        
    width100%;
        
    height100%;
        
    background#000;
        
    overflowauto;
    }
    </
    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>
     

    Attached Files:

  3. Zanthus thread starter macrumors member

    Joined:
    Aug 19, 2009
    Location:
    Reading, Uk
    #3
    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
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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.
     
  5. bpaluzzi macrumors 6502a

    bpaluzzi

    Joined:
    Sep 2, 2010
    Location:
    London
    #5
    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.
     

Share This Page