Is it possible to change the style of a vertical scrollbar? I would like to remove both arrows up and down.
<div class="msg-container-base">
<message
*ngFor="let message of thread.messages | async"
[message]="message">
</message>
</div>
.msg-container-base {
border: 1px solid #ddd;
background: white;
overflow-x: hidden;
}
It is not recommended to play with the style of scrollbars because it has very bad portability (IE and Firefox won't support it), but if you still want to go that way, here is a jsfiddle on how to play with the webkit style for the scrollbar
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 2px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 2px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: darkgrey;
}
You can do it but it only works on webkit browsers for now.
Alternatively, you could do the job with JQuery plugins.
Here's a way to do style your scrollbar with CSS:
::-webkit-scrollbar-track {
background-color: #b46868;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-button {
background-color: #7c2929;
}
::-webkit-scrollbar-corner {
background-color: black;
}
Related
As you can see in the image below I have a web component that has a scroll in x and other scroll in y direction, so when I give them a custom css style there is this white square in the bottom-right corner that looks bad and my question is: How can I make it disappear? Thanks!
Fun fact: As I was adding the code snippet I realized that stackoverflow or my web browser is overwriting my scroll style and making it look better. That would be it, but idk how to reproduce it on my project.
.box {
border: 1px solid black;
width: 5em;
height: 5em;
overflow: scroll;
background: pink;
}
/* width */
::-webkit-scrollbar {
width: .5rem;
height: .5rem;
}
/* Track */
::-webkit-scrollbar-track {
background: red;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgb(0, 0, 0);
border-radius: 5em;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
<div class="box">
<div>aaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaa</div>
</div>
See ::-webkit-scrollbar-corner.
.box {
border: 1px solid black;
width: 5em;
height: 5em;
overflow: scroll;
background: pink;
}
/* width */
::-webkit-scrollbar {
width: .5rem;
height: .5rem;
}
/* Track */
::-webkit-scrollbar-track {
background: red;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgb(0, 0, 0);
border-radius: 5em;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
::-webkit-scrollbar-corner {
background: transparent;
}
<div class="box">
<div>aaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaa</div>
</div>
when I have a web page with a scrollable content. With css property "overflow:auto" or "overflow:visible" the scrollbar is visible on desktop browsers, but when I open the page on mobile browsers the scrollbar appears only when I try to scroll.
Is there a way to make the scrollbar always visible on mobile devices? I have tried some JQuery libraries but none of them have worked.
The html code is trivial, I have a scrollable div with an IFrame inside:
<div id="wrapper">
<iframe id="frameContent" src="mysite" scrollable="yes"></iframe>
</div>
The css:
#wrapper{
overflow: scroll;
-webkit-overflow-scrolling: touch;
width: 500px;
height: 200px;
}
#frameContent{
width: 100%;
height: 100%;
}
Try adding the below to your CSS, note that this is webkit specific:
Demo Fiddle
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
/* !important is needed sometimes */
::-webkit-scrollbar {
width: 12px !important;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
-webkit-border-radius: 10px !important;
border-radius: 10px !important;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px !important;
border-radius: 10px !important;
background: #41617D !important;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important;
}
::-webkit-scrollbar-thumb:window-inactive {
background: #41617D !important;
}
Add this css code - It will change the style of scrollbar in mobile devices only
For issues with Safari, IOS browsers,
Setting
-webkit-overflow-scrolling: auto
along with mentioned CSS above in other ::-webkit-scrollbar solutions here, works well
is there any way to hide the scrollbar track but not the thumb? It should look like this:
Its currently looking like this:
This is the actual css for the scrollbar:
*::-webkit-scrollbar {
width: 10px;
}
* {
scrollbar-width: thin;
scrollbar-color: var(--dark-blue) var(--custom-white);
}
*::-webkit-scrollbar-track {
background-color: var(--custom-white);
}
*::-webkit-scrollbar-thumb {
background-color: var(--dark-blue) ;
border-radius: 20px;
border: 3px solid var(--custom-white);
}
FINAL CODE:
*::-webkit-scrollbar {
background-color: transparent;
width: 15px;
}
*::-webkit-scrollbar-track {
background-color: transparent;
}
*::-webkit-scrollbar-thumb {
border-radius: 20px;
border: 4px solid transparent;
background-color: rgba(0,0,0,0.2);
background-clip: content-box;
}
Just add overflow: overlay; to the body tag instead of overflow: auto.
both work the same but with OVERLAY your scrollbar will be on top of content just as you want.
Worked for me.
You can just add the background-color property to your ::-webkit-scrollbar and set it to transparent.
::-webkit-scrollbar {
background-color: transparent;
width: 10px;
}
* {
scrollbar-width: thin;
scrollbar-color: var(--dark-blue) var(--custom-white);
}
*::-webkit-scrollbar-track {
background-color: var(--custom-white);
}
*::-webkit-scrollbar-thumb {
background-color: var(--dark-blue) ;
border-radius: 20px;
border: 3px solid var(--custom-white);
}
Alright, since i tried everything with CSS and nothing worked, i figured it would be best to use an external package that helped me achieve this very very easily.
I used this library which is suuper super easy to set up and use. All i had to do was install it and use the component. In the wiki they have an example of use and its very noob-friendly and customizable.
*::-webkit-scrollbar {
border: none;
background-color: transparent;
} /* webkit browsers(safari, chrome) */
*{
scrollbar-color: #404040b3 transparent; /*firefox*/
}
This is what worked for me finally.
When not using ::-webkit-scrollbar it looks fine:
Normal image
But when using ::-webkit-scrollbar with the current code below, it gives me a white bar on the right side:
/* width */
::-webkit-scrollbar {
width: 9px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #6495ED;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #208B97;
}
This is how it looks like:
Image with white bar
How can I avoid this?
The color for the bar is set in -track:
::-webkit-scrollbar-track {
background: #f1f1f1;
box-shadow: inset 0 0 5px grey;
}
You may need to add a vendor prefix for box-shadow too:
-webkit-box-shadow: inset 0 0 5px grey;
Change the background color of the track:
background: red;
Because of my awesomeness, I managed to fix this all by myself, without any help.
Adding overflow: hidden; to body {} fixed the issue.
I have created a custom scroll bar which seem to be working fine on firefox, however i'm having an issue with my scroll appearing on screen in a webkit browser. Click here
#product-desc{
top: 270px;
left: 20px;
right: 20px;
bottom: 20px;
height: 90px;
max-width: 350px;
overflow-x: hidden;
overflow-y: scroll;
}
#product-desc :: -webkit-scrollbar{
width: 12px;
}
#product-desc :: -webkit-scrollbar-track{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
#product-desc :: -webkit-scrollbar-thumb{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
color: #000;
}
Does anyone know how i can resolve this issue?
These are the pseudo elements themselves. The actual parts of the scrollbars.
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
You may have a look at Custom Scrollbars in WebKit
You may also go through Styling scrollbars the Webkit way - CSS3