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.
Related
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
How to set the scroll bar visible in a div ?
.table-wrapper.grouped {
max-height: 300px;
overflow-y: scroll;
}
it shows scroll bar only if I try to scroll.
SOLVED
/* width */
.table-wrapper.grouped::-webkit-scrollbar {
width: 10px;
}
/* Track */
.table-wrapper.grouped::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
.table-wrapper.grouped::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 10px;
}
/* Handle on hover */
.table-wrapper.grouped::-webkit-scrollbar-thumb:hover {
background: #fff;
}
Notice: It works only in chrome and Safari
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;
}
Generally in a scroll bar there will be up and down arrows at both ends in a vertical scroll bar.
Is there anyway to remove it so that only the scroll bar appears and not the arrows at both ends. Below is my CSS:
.scrollbar-vertical
{
top: 0;
right: 0;
width: 17px;
height: 100%;
overflow-x: hidden;
scrollbar-3dlight-color:#999;
scrollbar-arrow-color:white;
scrollbar-base-color:white;
scrollbar-face-color:#999;
border-radius:5px 5px;
}
By Assuming that you want to customize the browser scrollbar,
You can do this easily with some nice Jquery Plugins, or you can do the magic with css. But it only works on webkit browsers for now, Here is how
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Source: http://css-tricks.com/custom-scrollbars-in-webkit/
Else you can use a plugin. (Recommended)
As in an early comment, i suggest you use the niceScroller Plugin. That's nice and easy.
Source : http://areaaperta.com/nicescroll/
Simple Implementation
<script>
$(document).ready(
function() {
$("html").niceScroll();
}
);
</script>
You can use below style in your css to hide scrollbar arrows,
::-moz-scrollbar-button:decrement,
::-moz-scrollbar-button:increment,
::-webkit-scrollbar-button:decrement,
::-webkit-scrollbar-button:increment {
width: 0px;
}
or
::-moz-scrollbar-button, ::-webkit-scrollbar-button {
width: 0px;
}
visibility: collapse !important;
maybe ?
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