I am styling some scrollbars on a webpage for webkit, and I want the track to be semi-transparent so that some of the background image bleeds through, but when I insert an RGBa value, it treats it just like an RGB value (without any alpha-channel). Does ::-webkit-scrollbars not accept RGBa? I know it doesn't accept anything like transitions, so did WebKit skip out on other cool effects too?
Code:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 8px;
}
::-webkit-scrollbar-track {
background-color: rgba(57,57,57, .6);
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: rgba(156, 156, 156, .6);
}
(But - on my side - it is treating rgba as just a plain rgb value)
Checkout my vertical jsfiddle for doing it with a vertical page. I setup a transparent track with a background image with the following:
::-webkit-scrollbar-track {
background: rgba(57,57,57, .6);;
}
For a horizontal page, checkout this horizontal fiddle. The difference with the horizontal code is I setup the page to be 100% height:
body, html, .scrolls {
height: 100%;
}
Then I wrapped the page content in a div, which is where the scrolling will happen, not on the page itself, like so:
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
white-space:nowrap;
background-image: url('http://www.evokia.com/images/large-background.jpg');
}
This is the workaround for the fact that it appears that the horizontal scroll on the page never gets the background of the page, so in order to get the transparent track we needed to create the scroll in the page.
I'm pretty sure webkit does support RGBa values, I've used body::-webkit-scrollbar-track{} which has worked fine.
I've also used the Jscroll pane plugin, which I've found to be very intuitive and this does support rgba values too. This can also support full webpage customised scroll bars and IE 7+ as well.
Is it possible to see your code to see if ther are any issues?
Related
I've set up my own custom scrollbar with CSS, and I'd like to know know how to only apply these settings to my vertical crossbar.
I've looked up other posts to fix this, but haven't been successful in implementing their solutions in my project.
Any fix that either removes my horizontal scrollbar completely or resets its settings to default would be greatly appreciated.
Here's my code:
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: rgb(26, 23, 23);
}
::-webkit-scrollbar-thumb {
background-color: hsl(270, 2.9%, 48.7%);
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: hsl(270, 2.9%, 78.7%);
}
edit: The problem seems to have been related to other pre-built styles overriding overflow-x. overflow-x: hidden !important; solved the issue.
The questioner have faced a problem that a WebKit engine won't allow him to remove customized horizontal scrollbar.
It seems that the implementation of such a removal vary from one browser to another and there's no universal way to hide scrollbars.
Using overflow: hidden will disable the scroll and that’s not what we want.
So we’ll need another way to hide the scrollbar.
Unfortunately, there is no universal CSS property that does something
like this
div {
scrollbar-visibility: hidden; /* <--- I wish we had this one !! */
}
We’ll need to implement different CSS properties for each browser.
For Firefox, we can set the scroll-bar width to none.
scrollbar-width: none; /* Firefox */
For IE, we’ll need to use -ms prefix property to define scrollbar style
-ms-overflow-style: none; /* IE 10+ */
For Chrome and Safari. We’ll have to use CSS scrollbar selector.
Then apply display: none to hide it.
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
Or you can set it’s width and height to 0.
::-webkit-scrollbar {
width: 0;
height: 0;
}
https://redstapler.co/css-hidden-scrollbar-while-scrollable-element/
Nevertheless, the following solution took effect in questioner's situation:
overflow-x: hidden !important;
I'm working in an Angular 9 project, using Material (SCSS stylesheets).
I have a Material select, there's many options and so you're able to scroll through them. The problem is, unless you knew there were other options, or happened to try a scroll, you wouldn't know the list extends. I want to resolve this by having the scroll bar always show.
How can I make the scroll always be visible in the material select element. I'm guessing I'll use some sort of style. I'm also using scss stylesheets.
Here's what shows now:
I want the scroll to always show, not just when you literally scroll down the element:
I also make a quick https://stackblitz.com/edit/always-show-scroll-material-select
The scroll is not showing because you are probably using the trackpad or a magic mouse. Using an external mouse will show the scrollbar just setting "overflow" to "auto" or "scroll".
If you want to show also the scrollbar using the trackpad or the magic mouse, you can still do it using the -webkit-scrollbar pseudo-element
In this post is also explained:
Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink
In your particular case you could achieve this using these css lines:
::ng-deep .mat-select-panel::-webkit-scrollbar {
-webkit-appearance: none;
}
::ng-deep .mat-select-panel::-webkit-scrollbar:vertical {
width: 11px;
}
::ng-deep .mat-select-panel::-webkit-scrollbar:horizontal {
height: 11px;
}
::ng-deep .mat-select-panel::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
WebKit/Blink's (Safari/Chrome) default behaviour on MacOS since 10.7 (Mac OS X Lion) is to hide scroll bars from trackpad users when they're not in use. This can be confusing; the scroll bar is often the only visual cue that an element is scrollable.
Example (jsfiddle)
HTML
<div class="frame">
Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!
</div>
CSS
.frame {
overflow-y: auto;
border: 1px solid black;
height: 3em;
width: 10em;
line-height: 1em;
}
WebKit (Chrome) Screenshot
Presto (Opera) Screenshot
How can I force a scroll bar to always be displayed on a scrollable element in WebKit?
The appearance of the scroll bars can be controlled with WebKit's -webkit-scrollbar pseudo-elements [blog]. You can disable the default appearance and behaviour by setting -webkit-appearance [docs] to none.
Because you're removing the default style, you'll also need to specify the style yourself or the scroll bar will never show up. The following CSS recreates the appearance of the hiding scroll bars:
Example (jsfiddle)
CSS
.frame::-webkit-scrollbar {
-webkit-appearance: none;
}
.frame::-webkit-scrollbar:vertical {
width: 11px;
}
.frame::-webkit-scrollbar:horizontal {
height: 11px;
}
.frame::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
.frame::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
WebKit (Chrome) Screenshot
For a one-page web application where I add scrollable sections dynamically, I trigger OSX's scrollbars by programmatically scrolling one pixel down and back up:
// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;
// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);
This triggers the visual cue fading in and out.
Here is a shorter bit of code that reenables scroll bars across your entire website. I'm not sure if it's much different than the current most popular answer but here it is:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Found at this link: http://simurai.com/blog/2011/07/26/webkit-scrollbar
Browser scrollbars don't work at all on iPhone/iPad. At work we are using custom JavaScript scrollbars like jScrollPane to provide a consistent cross-browser UI: http://jscrollpane.kelvinluck.com/
It works very well for me - you can make some really beautiful custom scrollbars that fit the design of your site.
Another good way of dealing with Lion's hidden scroll bars is to display a prompt to scroll down. It doesn't work with small scroll areas such as text fields but well with large scroll areas and keeps the overall style of the site. One site doing this is http://versusio.com, just check this example page and wait 1.5 seconds to see the prompt:
http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb
The implementation isn't hard but you have to take care, that you don't display the prompt when the user has already scrolled.
You need jQuery + Underscore and
$(window).scroll
to check if the user already scrolled by himself,
_.delay()
to trigger a delay before you display the prompt -- the prompt shouldn't be to obtrusive
$('#prompt_div').fadeIn('slow')
to fade in your prompt and of course
$('#prompt_div').fadeOut('slow')
to fade out when the user scrolled after he saw the prompt
In addition, you can bind Google Analytics events to track user's scrolling behavior.
Chrome recently updated its input element styles. I really like the number input type, but their new style gives us rounded buttons that don't fit neatly into square input boxes.
I've put in many attempts to get these inputs to change, but they won't budge. From the input[type='number'] itself to these buttons:
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
border-radius: none !important; background: black; color: red;
}
input:-webkit-autofill { background: black; color: red; }
It seems they may not be able to change at all. Does anyone have experience with this? I know there's a way to hide the buttons. Ideally I just want to remove their border-radius.
Interestingly, padding seems to work on these buttons. I know they're listening!
There are ways to accomplish that. Here's a pure CSS solution:
http://jsfiddle.net/Volker_E/WwfW9/
As you can see, the magic CSS property/value in your case is -webkit-appearance: none;.
Through that the Spin Buttons lose their default appearance. And you're able to style in (nearly) every way you want to.
/* Spin Buttons modified */
input[type="number"].mod::-webkit-outer-spin-button,
input[type="number"].mod::-webkit-inner-spin-button {
-webkit-appearance: none;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1em;
border-left: 1px solid #bbb;
opacity: .5; /* shows Spin Buttons per default (Chrome >= 39) */
}
I've added a Data URI image as background (therefor the small size), but you can add whatever image/CSS property you think is fitting your needs.
Only problem remaining is, that you're losing a bit on usability side, as you're not able to style the up and down button separately, and you don't have :hover and :focus styles on a single button.
That's simply not possible with current implementation in Chrome.
Have fun!
Edit 2015-01-18: Improved answer reflecting changes in Chrome >= v39. Thanks to #dtracers
WebKit/Blink's (Safari/Chrome) default behaviour on MacOS since 10.7 (Mac OS X Lion) is to hide scroll bars from trackpad users when they're not in use. This can be confusing; the scroll bar is often the only visual cue that an element is scrollable.
Example (jsfiddle)
HTML
<div class="frame">
Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!
</div>
CSS
.frame {
overflow-y: auto;
border: 1px solid black;
height: 3em;
width: 10em;
line-height: 1em;
}
WebKit (Chrome) Screenshot
Presto (Opera) Screenshot
How can I force a scroll bar to always be displayed on a scrollable element in WebKit?
The appearance of the scroll bars can be controlled with WebKit's -webkit-scrollbar pseudo-elements [blog]. You can disable the default appearance and behaviour by setting -webkit-appearance [docs] to none.
Because you're removing the default style, you'll also need to specify the style yourself or the scroll bar will never show up. The following CSS recreates the appearance of the hiding scroll bars:
Example (jsfiddle)
CSS
.frame::-webkit-scrollbar {
-webkit-appearance: none;
}
.frame::-webkit-scrollbar:vertical {
width: 11px;
}
.frame::-webkit-scrollbar:horizontal {
height: 11px;
}
.frame::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
.frame::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
WebKit (Chrome) Screenshot
For a one-page web application where I add scrollable sections dynamically, I trigger OSX's scrollbars by programmatically scrolling one pixel down and back up:
// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;
// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);
This triggers the visual cue fading in and out.
Here is a shorter bit of code that reenables scroll bars across your entire website. I'm not sure if it's much different than the current most popular answer but here it is:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Found at this link: http://simurai.com/blog/2011/07/26/webkit-scrollbar
Browser scrollbars don't work at all on iPhone/iPad. At work we are using custom JavaScript scrollbars like jScrollPane to provide a consistent cross-browser UI: http://jscrollpane.kelvinluck.com/
It works very well for me - you can make some really beautiful custom scrollbars that fit the design of your site.
Another good way of dealing with Lion's hidden scroll bars is to display a prompt to scroll down. It doesn't work with small scroll areas such as text fields but well with large scroll areas and keeps the overall style of the site. One site doing this is http://versusio.com, just check this example page and wait 1.5 seconds to see the prompt:
http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb
The implementation isn't hard but you have to take care, that you don't display the prompt when the user has already scrolled.
You need jQuery + Underscore and
$(window).scroll
to check if the user already scrolled by himself,
_.delay()
to trigger a delay before you display the prompt -- the prompt shouldn't be to obtrusive
$('#prompt_div').fadeIn('slow')
to fade in your prompt and of course
$('#prompt_div').fadeOut('slow')
to fade out when the user scrolled after he saw the prompt
In addition, you can bind Google Analytics events to track user's scrolling behavior.