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.
Related
I am developing chat and call application in my project.
So there are 3 tabs.
people to chat
dialer to dial to particular person
chat / call history
in this tabs there are 3 portions.
header
chat / call / history portion.
tab changer navigator.
I make middle portion scrollable.
I want to make that scrollbar thinner. I don't want to use browser's default scrollbar.
For this I find "::-webkit-scrollbar" which is perfect only for chrome.
I want to apply this css to all browsers.
I find scroll plugins but I don't want to use any external plugin. I want to solve this by using jquery / css/ javascript.
is there any property or anything which can solve my issue?
The ::webkit-scrollbar pseudo element is NON-Standard and there is no way to make this cross-browser-compatible at the moment. There are good reasons why this hasn't evolved as standard yet. Just imagine some touch devices having browsers without scrollbars or with scrollbars, which are hidden by default and shown only when scrolling (to save valuable space). Custom styling would need to fit all these use cases.
Therefore I'd generally recommend you not to style the browser scrollbar with this hack. If you really need a solution, you could try jquery.scrollbar. IMHO this is no robust solution, however. It relies purely on JavaScript and may be jiggling around on some devices.
edit: further info on MDN
So I've been working on browser compatibility. Unfortunately, when I first designed my site, I desigend the CSS aesthetically for Firefox only. Now I'm having all sorts of trouble trying to get it to look good in the other major browsers. However, when I fix the CSS positioning such as floating a box object to the right, IE8 forces it left. I checked my code on W3C and it's okay semantically. I use little to no javascript. It's a portfolio website. The screensize shifts everything around no matter what browser, yet there is no perfect CSS for this so how does one get things to stay in place? I'm not too familiar with JQuery, but this seems to be the closest I can get to an answer. Where would I plug this into my site to see if this works?
I am using text-shadow for all p and headline tags (2px white glow for better readability), everything works fine until page is scrolled and javascript changes absolute positioning on one element to fixed - which I want to stay visible.
Is there any way apart of changing style for opera to make it scrolled smoothly? overflow:auto is not working in this case...
Thanks
it's hard to say 100% without seeing the code, but I guess that the way you've styled this page makes Opera do a lot of reflowing and painting when it is scrolled, and the combination of styles will make this a very expensive operation. (It would be nice to see a jsfiddle or get a link to the actual page, this would also make it simpler to advice on possible workarounds).
There are various fixes you could try - like keeping the element you want on-screen styled with position:absolute and move it from JavaScript after scroll events, or simply avoid setting position:fixed in Opera and letting the element scroll away for better scroll performance.
However, I'd strongly recommend that you first report a bug to Opera. Why?
The reason and the genesis of the web is collaboration. It may not be obvious to (understandably) frustrated web developers struggling with browser bugs, but they have a responsibility for helping browser vendors improve when they find problems, thereby contributing to moving the web forward. A minority browser like Opera admittedly has less development and QA staff resources, but to some extent support from the user community and "normal" web developers makes up for this and makes it possible also for smaller players to develop in the Web ecosystem. I think that's one of the web's strengths and the real reason why no single corporation has been able to dominate it.
So please report your issues and problems :)
This is a problem with Opera, not any way you've written the code. Opera is a gigantic steaming pile of doo-doo with almost no market share, and you should use another browser.
That's basically all anyone could tell you here, unfortunately. I understand that everyone loves their browser of choice but some just don't handle these things well. Other examples: browser with a poor javascript engine rendering animations erratically and jerky, etc.
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/
This may sound crazy, and i didnt believe it until i saw it for myself.
The vertical scroll bar does not scroll when you click in the space between the scroller or the arrows. You have to drag the bar to get it to scroll. This only happens in the ugly default theme (not windows classic).
The scroll bar has some heavy javascript behind it that drive scrolling of another DIV on the page.
Has anyone even encountered this before? Why the heck does the theme influence IE's rendering?! Only IE!
edit:
this problem happens when you are in "non-classic" XP theme (the default ugly one). switching themes does not cause this, but it does fix it if you switch to classic from the default.
Does it help when you add
<!--[if IE]><meta http-equiv="MSThemeCompatible" content="no"><![endif]-->
to your page source? It worked well to work around glitches in IE when a non-classic theme is enabled for me. Note that the conditional comments are there so that firefox does not parse the tag (because it will screw up scrollbars in firefox sometimes).
I just had the same problem with vertical scrollbar in IE7 within the XP theme. After many experiments, I finally found the solution to it. I don't know this solution fits your case.
The container (div#scroll in the example below) with the rendered scrollbars must be larger than 18px. Any number below that will cause the vertical bar disabled.
<div id="scroll">
<div id="fill">
</div>
</div>
The stylesheet, for example:
#fill{
width: 1px;
height: 1000px;
}
#scroll {
width: 18px; /* This has to be larger than or equal to 18. */
height: 50px;
overflow-y: scroll;
}
Thanks,
Grace
In order to avoid certain Windows restrictions, IE re-implements almost all the controls visible on a web page.
The Old New Thing : Windowless controls are not magic
<excerpt>
The Internet Explorer team went and reimplemented all of the controls that a web page would need. They have their own windowless checkbox control, a windowless listbox control,
a windowless edit box, and so on. In addition to reproducing all the functionality of the windowed controls, the Internet Explorer folks also had to reproduce the "look" of the
windowed controls, down to the last pixel. (Functions like
DrawThemeBackground and DrawFrameControl prove extremely helpful here.)
If I recall correctly, the only element that is still windowed is the <SELECT> element.
If you squint, you can see some places where they didn't quite nail it. For example, if you right-click in a text box, options like "Right to left reading order" and "Insert Unicode control character" are missing. As another example, notice that IE's scroll bars do not light up when you hover over them.
</excerpt>
Without seeing the code implementing your page, I would guess that this is another manifestation of "IE's controls don't act native".
If you have a support contract with Microsoft, I'd suggest complaining to them through that channel; if not, see if you get any responses in the microsoft.public.internetexplorer.general newsgroup. Back in IE6, they broke the scrollbar with KB824145 and fixed it with KB832894, so it's not like theses sorts of problems haven't happened and been resolved before.
First, I'll start saying that IE is a terrible browser and in some cases you don't have control over issues while developing a web application.
In that case I haven't encounter such an issue and a Google search don't pull anything on the subject. I'd say it must be something in your code that lead to a weird bug. Most likely it won't break in a lot of systems, so unless it's a very important application (sales, government...) you could leave it that way.
Look at it that way: who change the style of windows to classic? Geeks. And do geeks use IE? No. ^^ ... Joking, but not really.
If it's important I'll need to take a look at your actual code for "The scroll bar has some heavy javascript behind it that drive scrolling of another DIV on the page."