::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,70);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(239,149,36,100);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,30);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,30);
}
I found this css online which modified the style of the scroll bar. However it also changed the scroll bar of the page itself and I need it to change only the one of the menu list. The menu list id is "cssmenu" . Is it possible and how please?
Just use any selector before your scroll rules
.myscroll {
height: 1000px;
overflow: scroll;
}
.myscroll p {
height: 2000px;
}
.myscroll::-webkit-scrollbar {
width: 12px;
}
/* Track */
.myscroll::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,70);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
.myscroll::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(239,149,36,100);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,30);
}
.myscroll::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,30);
}
<div class="myscroll">
<p>Content<p>
</div>
Related
I have applied overflov-y scroll using following style:
.custom #front_videos .large-2 {
height: 545px;
overflow-y: scroll;
position: relative;
}
that display scroll like this -> http://nimb.ws/XZ3RVS
I want to display that scroll bar like this -> http://nimb.ws/IGMnXl
So any one have idea how to display scroll bar like this using CSS style then replay me.
Thanks.
I've whipped up some styles for you that looks pretty similar making use of ::-webkit-scrollbar and it's sibling selectors. Note this is only for Chromium browsers, as Scrollbars aren't a part of the W3C spec and thus don't have valid selectors, outside of Chrome's relatively robust pseudo-selectors.
.large-2 {
margin-left: 30px;
float: left;
height: 300px;
overflow-y: scroll;
margin-bottom: 25px;
width: 100px;
background: #ccc;
}
.force-overflow {
min-height: 450px;
}
.large-2::-webkit-scrollbar-track {
border: 1px solid #000;
padding: 2px 0;
background-color: #404040;
}
.large-2::-webkit-scrollbar {
width: 10px;
}
.large-2::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #737272;
border: 1px solid #000;
}
<div class="custom">
<div id="front_videos">
<div class="large-2">
<div class="force-overflow"></div>
</div>
</div>
</div>
There is a relatively graceful JavaScript solution called NanoScroller - though I don't personally have much experience with if, if you're looking for something with more cross-browser ability.
try this:
::-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);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
Try this snippet.
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background:black;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background:rgb(54, 56, 58);
}
You can style scrollbar using ::-webkit-scrollbar prefix but it only work in webkit.
I think you better use "jquery.mCustomScrollbar.concat.min" this jquery plugin. It support most of the browser.
How to remove Scrollbar but don't remove scroll line and how to indent this line?
::-webkit-scrollbar {
width: 10px;
opacity: 0;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.3);
border-radius: 10px;
display: none;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.9);
background-color: #ff8000;
}
I am working with bootstrap 4. I would like to know if there is a way to change the scrollbar style. I just tried with webkit mode, but does not work.
The following code will works for webkit
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Bhoot's code above works, but I added a backgound-color for the thumb because I am using a dark background.
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(200,200,200,1);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color:#fff;
-webkit-box-shadow: inset 0 0 6px rgba(90,90,90,0.7);
}
If you are trying on any div or elements for scroll bar customization, please assign and use element id in the CSS as below,
<div class="cardsContainer" id="cards-container">
#cards-container::-webkit-scrollbar {
width: 8px;
background-color: #F5F5F5;
}
#cards-container::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(104, 140, 240, 0.3);
}
#cards-container::-webkit-scrollbar-thumb {
background-color: lightblue;
outline: 1px solid slategrey;
}
The above way, it worked for me, even though it didn't work when I tried as follows,
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
I want to give a glow effect fro my scroll bar.
Is there any web kit scrollbar border colour option?
any body knows?
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
border:1px solid #eee;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 0px;
background: #aaaaaa;
}
::-webkit-scrollbar-thumb:window-inactive {
background: #eee;
}
::-webkit-scrollbar-thumb:hover{
background: #cccccc;
}
It depends on which element you want to glow, but to get a 'glow' on any item you would use box-shadow with x y radius spread color you can ignore the spread if you want to and the color if you want the box-shadow to be black.
so:
box-shadow: 0 0 1em 0 #000
is equal to:
box-shadow: 0 0 1em;
So, if you want the complete scrollbar to glow:
::-webkit-scrollbar {
width: 12px;
box-shadow: 0 0 1em #f00;
}
Or only the Thumb:
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 0;
background: #aaaaaa;
box-shadow: 0 0 1em #f00;
}
I put the custom scroll bar it works on all browser but on Firefox it doesn't work.
::-moz-scrollbar {
width: 6px;
}
::-moz-scrollbar-track {
-moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-moz-border-radius: 10px;
border-radius: 10px;
}
::-moz-scrollbar-thumb {
-moz-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0);
-moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-moz-scrollbar-thumb:window-inactive {
background: rgba(255,0,0);
}
Firefox does not support custom scrollbars. See more at https://bugzilla.mozilla.org/show_bug.cgi?id=77790.
You can use JQuery Custom Scrollbar.