Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Member ravage's Avatar
    Join Date
    Apr 2011
    Posts
    92
    Member #
    27355
    Liked
    2 times
    I have a small box container within my page and i have the 'overflow' set to 'scroll' in its css definition as the content is larger than the box. unfortunately i'm left with some retro-standard scroll bars. i've tried add the following code to the css definition of the box (which also contains the overflow: scroll but it didn't work:

    scrollbar-face-color : #FF0000;
    scrollbar-highlight-color : #FF6666;
    scrollbar-3dlight-color : #FF9999;
    scrollbar-darkshadow-color : #660000;
    scrollbar-arrow-color : #FFCCCC;
    scrollbar-shadow-color : #FF0000;
    scrollbar-track-color: #330000;

    Is there another way to style the scroll bars or does styling the scrolls only apply to the main window?

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Styling scrollbars only works in IE, and iirc, they dumped that a version or 2 back.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Member ravage's Avatar
    Join Date
    Apr 2011
    Posts
    92
    Member #
    27355
    Liked
    2 times
    Okay. Can anyone think of an html5 alternative solution?

  5. #4
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    Give this a go ravage:
    http://css-tricks.com/examples/WebKitScrollbars/
    I have used it for my FRixeL site and it seems to be working out all right so far.
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  6. #5
    Member ravage's Avatar
    Join Date
    Apr 2011
    Posts
    92
    Member #
    27355
    Liked
    2 times
    m3n0tu18: the link you provided is what I'm looking for. however i only want this effect to occur within a content box and not the whole page itself. do you know how I would place this code:

    /* Let's get this party started */ ::-webkit-scrollbar { width: 12px; } /* Track */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: rgba(255,0,0,0.8); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }

    into an id i already have? i.e.:

    div#contentBoxLeft{ position: absolute; top: 180px; left: -17px; width: 300px; height: 250px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; /*opacity: 0.6;*/ filter: alpha(opacity=60); /* For IE8 and earlier */ overflow: scroll; overflow-x: hidden;

  7. #6
    Member ravage's Avatar
    Join Date
    Apr 2011
    Posts
    92
    Member #
    27355
    Liked
    2 times
    still trying to find a solution to my problem...

    m3n0tu18's suggestion above works but I'm only looking to style the scroll bar for a specific div within the page, not all the scroll bars for the site.

    i'm trying to figure how I would place this code INSIDE the style for a div:

    /* Let's get this party started */ ::-webkit-scrollbar { width: 12px; } /* Track */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: rgba(255,0,0,0.8); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }

    is there such a way?

    thanks!

  8. #7
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    Give this a go instead. Its Javascript solution:

    http://livepipe.net/control/scrollbar
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  9. #8
    Member ravage's Avatar
    Join Date
    Apr 2011
    Posts
    92
    Member #
    27355
    Liked
    2 times
    Quote Originally Posted by m3n0tu18, post: 226269
    Give this a go instead. Its Javascript solution:

    http://livepipe.net/control/scrollbar
    this is def. what i'm looking for. i'm having issues implementing it though. i created a test page with nothing but this container but this styled scroll box. i can't get the slider to appear and thus scroll the rest of the content which extends past the container dimensions

    http://extranet.receats.com/test.php

    can anyone see what i'm doing wrong?


Remove Ads

Posting Permissions

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

Search tags for this page

border radius for overflow scroll

Click on a term to search for related topics.
All times are GMT -6. The time now is 12:20 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com