I am facing one issue regarding horizontal scrollbar in IE.I want to decrease height of horizontal scrollbar. I have already customized it in Chrome but that style is not getting applied in IE.
CSS:
.scrollbar-style::-webkit-scrollbar {
height: 5px !important;
}
Can anybody please advise if they have worked on customizing scrollbar in IE?
It only work for webkit browsers.
In the documentation, It is mentioned that it is non standard.
Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
It is not supported by Internet Explorer, So it is not working on it.
Reference:
scrollbar
::-webkit-scrollbar
Related
This question is only about Firefox on Windows.
Here is the spec : The scrollbar should be hidden but scroll should be enabled.
On MacOS, the scrollbars will auto-hide and it is less jarring experience. However on Windows, the scroll bars just stay there and don't auto-hide. On Windows 10, the scrollbars are just too ugly and square.
Here are invalid answers or additional limitations:
Do not add margin/padding to the right/bottom as there is no good prediction of this value.
Do not use {overflow:hidden} as it would disable scrolling.
Here is as a CSS class that can be applied on all div/element that will have this behavior. These rules don't work as of now and the ugly scrollbar remains.
How would you fix this CSS class ??
.disable-scrollbars {
scrollbar-width: none; /* Newer Firefox and not confirmed */
overflow: -moz-scrollbars-none; /* Older Firefox*/
}
The experience should be similar to Chrome/Safari with -webkit-scrollbar:none; which works on both MacOS and Windows.
This cannot be solved only using CSS. The issue open against Firefox is under discussion for more than 6 years.
Here are the details : https://bugzilla.mozilla.org/show_bug.cgi?id=77790#c188
There is no solution to this problem until Firefox Devs allow scrollbar customization through what is termed as "CSS Scrollbar Modules".
Until then, Firefox on Windows will have ugly-thick-visible-grey scrollbars.
I am trying to create a scroll box whereby I can alter the shape and colors of the arrows and also the background of the text area.
I am trying to create the same scroll box as the followings but to no avail.
You can style Chrome, Opera and IE's scrollbars. Unfortunately, Firefox doesn't support it.
Moreover, each browser engine uses its own prefixes and properties to style the scrollbars, some offer more than others.
WebKit example:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: grey;
}
::-webkit-scrollbar-thumb {
background: black;
}
There are plenty of resources online about styling the scrollbars.
Bottom line is:
if you want 100% browser compatibility, use a JavaScript solution (google for "jquery scrollbars").
Great question!
As the other answers state the main scrollbars are styled and handled by the browser so this is not something you would achieve universally in all browsers.
However having said that there is a great resource here to help with this, its not going to produce exactly what you asked for but it will give you some cool scrollbars.
Every browser handles scrollbars with their own styling so changing them and making them look universally the same across browsers is very difficult. I know this is accomplishable with javascript but I'm not able to point you in the right direction of where to start with that.
I have a requirement to change css from did scrollbars. I know it is possible doing so for IE, Safari, Chrome but as far as I researched for Firefox it was not possible.
I wondering if it is currently available (such a basic studip feature right?) for Firefox without using third party implementation
thanks
Unfortunately, as of this writing there's no way to use CSS to customize Firefox scrollbars.
Is possible to change scrollbars' style for all browsers? If it is, how?
It is possible in Internet Explorer using a number of non-standard scrollbar-* CSS properties. See this page for a handy generator tool.
Other than that, it is possible only using custom JavaScript-powered scrollbar solutions. The jScrollPane jQuery plugin looks very nice and easy to install. Here is an example page.
Styling and programming scrollbars are not addressed by standards at this time, but some vendors have extensions to address this problem in desktop web browsers. The jScrollPane jQuery plugin is an excellent choice if you want to use custom scrollbars.
Vendor Extensions
Internet Explorer (starting with version 8) has extensions to CSS and the DOM allowing you to specify color only of the different parts of a scrollbar.
An updated link to the Microsoft documentation is this: http://msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx. You'll want to just look at all the properties starting with "-ms-scrollbar".
WebKit (e.g. Safari and Chrome) has a CSS pseudo-element for styling scrollbars which allows you to apply any CSS property to it. To learn more see this Surfin' Safari blog post: http://webkit.org/blog/363/styling-scrollbars/
Example:
::-webkit-scrollbar
{
width: 13px;
height: 13px;
}
Mozilla (e.g. Firefox) and Opera do not seem to have any support for styling scrollbars.
Custom Scrollbars
Regarding the jScrollPane jQuery plugin is an excellent choice, if you want custom scrollbars. It is pretty comprehensive in addressing expected functionality of scrollbars and keeps you from rolling your own.
It is important to realize jScrollPane replaces the browser's native scrollbars, and you might not find the "touch and responsiveness" of those custom scrollbars to be as good as "the real thing." But then again, it might be good enough if you value form over function.
This is a more recent link to the jScrollPane documentation: http://jscrollpane.kelvinluck.com/
Nope. IE allows you to set colours for some constituent parts of the scrollbar. Opera allows a few but not all of those styles.
Scrollbar colour styling is of increasing irrelevance as UIs move towards complex image-based scrollbar theming. In IE, setting any of the colours reverts the rendering back to a Windows 2000-style simple-3D scrollbar instead of any swishy user theme. Windows Vista/7 (Aero) users probably won't thank you for that.
You can of course make your own ersatz-scrollbars out of <div>s and style them how you like. But the result almost always behaves worse than real scrollbars, since you're trying to replicate a complex UI element whose expected behaviour is different for each OS. You can spend a lot of time reproducing paging behaviour, keyboard up/down and the mouse wheel, but it'll never quite feel as smooth a real OS scrollbar.
You can style scrollbars for all browsers with a little bit of Javascript. But at present time there is no way to style them using just CSS alone as a cross-browser solution.
This article will help if you decide to use Javascript.
This is a CSS related question, I got one good answer from my previous question, which suggested the use of some CSS code like overflow:auto together with a fixed height container.
And here is my actual implementation : on uni server
If by any chance you cannot access that server, try this
Please follow the instructions on screen and buy more than 4 kinds of tickets.
If you are using IE8, Opera, Safari, Chrome, you would notice that the lower right corner of the page now has a vertical scroll bar, which scrolls the content inside it and prevent it from overflowing. That's what I want to have in this section.
Now the problem is, this would not do in FireFox 3.6.2. Am I doing something not compliant to the CSS standard or FireFox has its own way of overflow control?
You can inspect the elements on screen, and all controlling functions are done in one javascript using jQuery. All CSS code is kept in a separated file as well.
According to the professor, FireFox would be the target browser, although the version was set to 2.0...
It seems you have to set a height / overflow to the <tbody> tag, not just the table (or maybe not the table at all, didn't test that).
So...
tbody { height: 130px; overflow: auto; }
And I specifically tested with "height", it seemed "max-height" didn't work as intended. Very odd behavior, indeed.
Have you tried overflow: scroll?