Results 1 to 7 of 7

Thread: Custom scroll-bar colors

  1. #1
    Join Date
    Apr 2009
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Custom scroll-bar colors

    1) Script Title: Scrollbar Colors customization

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/barcolor.htm

    3) Describe problem: Crossbrowser


    Hello friends

    The script above seems to be the easiest way (at least for me) to control the colors of the scrollbar.
    But - this little script isn't crossbrowser supported.
    Is there anyway to control the scroll-bar colors just as easy, and have it working as well in Safari, FF Chrome etc.?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    No. Only IE (and in certain cases Opera) allow this. Others consider it a part of the OS and therefore off limits to javascript.

    You can customize scrollbars within the page (though not simply and requires javascript), and even disable them for the page.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2009
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Then, what if the frame is within an iFrame?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    IE and sometimes Opera only. You could disable scrolling on the iframe and create custom scrolling using javascript if both pages are on the same domain.

    The bottom line though is that this degree of control over a web site's appearance is generally considered excessive. If you use server side code and javascript, you can probably get around these limitations for most browsers. But it's complicated.

    Or you can take what you're given in IE and possibly Opera and just allow the default bars in others. Incidentally, Safari, perhaps Chrome, others, have their own defaults.

    When taking any approach to custom scrollbars, it's best to use the custom bars in such a way that if a given browser doesn't support it, it doesn't break the page.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Apr 2009
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Exactly!

    My biggest concern is, that a standart, light gray scroller breaks the site's design - badly!

    I am working on a new, dark base-design (#222222).
    Having a light scroll-bar here is horrible to look at!

    A way to get around that problem could be:
    http://www.dynamicdrive.com/dynamici...gescroller.htm
    I've used this before - and it seems to work great cross browsers.
    - tho the possitions of the scroll-bottons varies slightly..
    Also, as I recall, this script doesn't support mouse-wheel scrolling /

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I think that John was saying that accessibility should be your primary concern. At the end off the day, a default scrollbar won't hinder a visitors accessibility of your content while a possibly badly scripted custom scrollbar might. The content and functionality of a website is ultimately more important than the design so if your design elements are in some way detrimental to functionality, your site will fail the visitor. Its a judgement call though and if you can find a way to satisfy the design without hindering accessibility then go with it. Good luck with your project.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You could use that script on the page in the iframe, on any page really to control its vertical scrollbar, replace it actually. If you have control over the source code of the page, if iframe, this means the page in the iframe.

    On a standards compliant page, add this to the script:

    Code:
    document.documentElement.style.overflowY = 'hidden';
    It can go right at the end, right before the closing </script> tag.

    Just to be clear, for iframe, the entire script and its markup must be on the page in the iframe. The script part may be made external, for iframe or not iframe pages.

    That will give you just the up and down arrow images in supporting browsers if the page in the iframe is also standards compliant. These will appear near the bottom of the iframe, within the iframe.

    These arrows could be moved to the top page, but that gets a bit complicated and requires the pages be on the same domain. And not only on the same domain, but also seen by the browser to be on the same domain, which if you don't use all relative paths can get tricky with www. and not www. perhaps appearing in the URLs as taken from the browser's perspective.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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