Is it possible to replace standard scrollbar (only appearance) with some custom one (the one from http://scripterlative.com/files/autodivscroll.htm to look like the top-left example from http://www.dyn-web.com/code/scroll/demos.php?demo=vert) so the script will still work and scrollbar behave like it wasn't modified?
Thanks!
Webkit supports it so it is possible in Safari and in Chrome. I tried it once, it works well.
My only problem: Doesn't support showing the scrollbar at the left or the top of the container.
An alternative solution would be to use CSS3 to adapt a custom scrollbar design, to achieve a standard, but different looking scrollbar.
See here CSS3 CUSTOM SCROLLBARS
Hope this helps!
Related
I would like to replace the dredged scrollbar that shows on PC web browsers with something a little nicer.
I have a div that has a "width" set and "overflow-x" set to "scroll", this gives me the horizontal scroll bar.
How can I change this standard scroll -
To something like this -
I'm sure it could probably be done with javascript, but don't know how to implement.
Cheers...
You could achieve this using Jquery Tools Scrollable.
If it doesn't solve your issue on its own, maybe a combination of it with Jquery UI as in this example will.
Check this out: http://jscrollpane.kelvinluck.com/
You can customize scroll bar size and color.
(You have not specified and I am assuming this is for web browsers)
How can I make my scroll bar black for a <div>?
Is there anything that will work in Webkit, IE7 to IE9 and Firefox?
You cannot do this in Firefox. Only IE and webkit browsers support modifying the scrollbar.
See http://msdn.microsoft.com/en-us/library/ie/ms531153%28v=vs.85%29.aspx on how to do it in MSIE and http://www.webkit.org/blog/363/styling-scrollbars/ on how to do it in webkit.
You cannot style the scrollbar of the browser. It's not universally supported (although IE did try to implement it).
Also, it's a bad idea to do so from an accessibility perspective. Think of (old) people who cannot see your very slim, almost invisible custom scroll bar or don't know that what you have there is actually a scroll bar.
You can use custom scrollbar plugins in JS like this one. It's all over the place
As Pez Cuckow said:
I imagine that custom scrollbar is implemented in javascript, it looks
very slick and you can't make a browsers scrollbar look that good!
Find an example I just put together for you at:
http://jsfiddle.net/9LHPW/2/ - note check the resources tab as this
includes four external files (3x Js and 1x CSS)
Have a look at this website for a further example (looks like exactly
what you want) with Javascript and jQuery:
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
You can find the plugin's home at
http://manos.malihu.gr/jquery-custom-content-scroller
Along with a how to use it section!
I agree you shouldn't tamper with the visibility (I'm looking at you Apple) of the scrollbar of a scrollable region. Sometimes, a box with scrollable text fits just inside the boundaries and there is no visual clue letting a user know that it scrolls thereby confusing the user. Is it really a good idea to prevent the user from being able to use your application? Most likely not, but you can also argue back that your target demographic wont have any problems; an application for extreme inline competition is probably not going to be used by people who aren't able to see very well. However there are accessibility/usability concerns that go beyond visual hinderances; cognitively impaired, or non tech-savvy, individuals might be very good at said aggressive inline and want to compete in your upcoming event but wont be able to because the black-on-black scrollbar looks awesome.
That all said, do what make you happy. That's what I do.
I am hoping to incorporate custom scrollbars in my site as there are divs with set heights that will overflow. I have managed to get exactly what I want using webkit styling in css however I am aware that there will be issues when looking at the site in Firefox or IE.
As a result, I tried to incorporate the jScrollPane library into my site but its causing all sorts of js "clashes" which is throwing the whole site into a mess!
Are there any simpler methods to customise my scroll bar so that I have cross browser compatibility without adding a new js page to the site?
Alternatively - is there a way I can attach something to the css for when the browser is firefox!?
Thanks
JD
Fast forward to 2017, and there are a lot of good custom scrollbar scripts these days. By good I mean ones that rely on native scrolling mechanics and works on mobile devices too. The one I use is Perfect Scrollbar. Some other good ones can be found here in this blog post.
I'm a little confused with what exactly you're asking for, but if you're looking for a scroll bar of some sort that can be customized with CSS, look no further than jQuery UI's Slider.
You'll have to add some event handlers to do the scrolling, but it shouldn't be too difficult over-all.
Here are some custom scrollbars you can use:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
One off these solutions should work. BTW i use JScrollpane and it works like a charm for me
I went through all of the suggestions above and was disappointed by either of the following issues:
poor cross-browser compatibility
lag
a lot of redundant code/ dependencies (jQuery UI)
Therefore, I've used some CSS trickery and JavaScript (depends on jQuery selectors) to build my own custom scrollbar implementation. The demo is available at https://dev.anuary.com/680a3c94-9651-550f-abca-e853613eb9ce/. The source code is hosted at https://github.com/anuary/jquery-custom-scrollbar.
My approach relies on the native browser scrollbar. However, this implementation does not support horizontal scrollbars.
Just found this, without jQuery, if anyone is interested:
http://www.script-tutorials.com/custom-scrollbars-cross-browser-solution/
On the mobile site I'm building, I need the top header to stay fixed positioned.
I am aware of the fixed position solution for Mobile Safari as seen here:
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
I tried it and it works well. However, I was wondering if there's a single solution that works for all major smartphone's mobile browsers. Note: I don't need the footer to stay fixed, just the top header. So this should make it easier accommodating for all mobile screen sizes since I'd be just setting the div's top to 0 onScroll.
Thanks!
Important update
As of iOS 5, fixed positioning works fine on mobile. Similarly latest androids support it.
Old answer
I think iScroll is the most actively developed solution, it does support Android
But there are a few things to watch out for:
By enabling this hack you are disabling features people are used to like zoom.
It is adding a lot of complexity to your solution.
For these reasons JQtouch decided not to use it:
Not a problem. It is not currently
supported in jQTouch. Not sure how
familiar you are, but the main problem
here is that mobile Safari does not
support position: fixed. A few people
have worked on implementations of
this, most notably
Cubiq
and
Doctyper.
Both feel wrong to me,
hence why I don't do by default, but
you're free to try to make an
extension which supports it-
Personally when dealing with stuff that needs fixed positioning on an iPhone I prefer to go with static positioning and just autoscroll to the bottom/top when changing the content dynamically.
I was facing the same problem for more than two weeks . And this solution worked for me. Just include
-webkit-backface-visibility: hidden;
in the css of the element along with position:fixed .
It will work fine
Following on from the link that Sam Saffron posted, it seems that a new version of iScroll (version 4) has resolved some of the problems Sam listed.
iScroll-4
In addition to all previous iScroll features, version 4 introduces:
Pinch / Zoom
Pull up/down to refresh
Improved speed and momentum
Snap to element
Customizable scrollbars
I have only looked at the demos on their site, so I can't vouch for it, but it looks good!
How can I replace the scrollbar's images using HTML/CSS?
I have:
scrollbar-base-color: #00acee;
scrollbar-dark-shadow-color: #00acee;
scrollbar-track-color: #ffffff;
scrollbar-face-color: #00acee;
scrollbar-shadow-color: #00acee;
scrollbar-highlight-color: #00acee;
scrollbar-3d-light-color: #00acee;
Can I use an image to accomplish the same idea?
No you can't use images in place of the scroll bar. I'll also just mention that changing the colours is very annoying to users and it only works in IE anyway, so just stick with the standard GUI elements.
For webkit based browsers (for a sufficiently new value of "webkit") there are a collection of propriety CSS properties.
No, you can't use an image in the scroll bar. (Also, even changing the color is only supported in IE in non-standard mode.)
The only way to use images in a scroll bar would be not to use the standard scroll bar at all, but implement a replacement scroll bar yourself using DHTML, or find someone who has done that already.
However, you should be a bit restrictive when changing the look of controls that the users are already used to. If you are not careful you may end up confusing people so that they don't even recognise it as a scroll bar at all...
It is not possible to put an image inside the scrollbar. Customizing the scrollbar is not a W3C spec (IE only CSS), but details on what is possible can be found here:
http://www.quirksmode.org/css/scrollbars.html
as far as i know you cant style a scroll bar with an image.
if you want to use jquery, you can do so easily using this jquery plugin:
http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html
The trick there is to "simulate" a scroll bar using some divs, which you can style any way you want, since they are just regular divs. After that its easy to just use the scrollTop property and scroll events etc (but you dont really need to know how it works to use it)
For MooTools, there's MooScroller.
Steve
jScrollPane (demo)
or
Interface (demo).
Both using jQuery.
Webkit == Safari and Chrome, but Firefox and Opera have plans to implement similar in upcoming releases. The spec is a killer though, so it may not be worth using even if you have the support.
Mootools has quite a few:
Mooscroller (will be
implemented into Mootools -more),
MooScroll (based on
Solutaire's?)
UvumiScroll
MochaUI's
I imagine it is part of Ext UI, and probably JQ's UI library, but have no personal experience there.
One non-library dependent class: http://www.hesido.com/web.php?page=customscrollbar