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
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
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;
}
Website Link
Screen Capture
I'm testing this in Safari and Chrome on the latest version of OSX. It seems to be confined to web-kit as other people have told me there is no horizontal scroll in IE.
I attempted to fix the issue with the following CSS:
/* For the "inset" look only */
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: hidden;
overflow-x: hidden;
}
body:hover {
overflow-y: scroll;
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 0px;
}
/* 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);
}
body {
// overflow-x: hidden;
font-family: "Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
width: 100%;
margin: 0;
//position: relative;
//left: 15px;
//-ms-scroll-limit: 0 0 0 0;
//-webkit-overflow-scrolling:touch;
}
It works except for the fact that vertical scroll no longer works on mobile touch devices. Probably because of this:
body:hover {
overflow-y: scroll;
}
I'm at a total loss here. What is the root cause of this problem?
Try adding this to your CSS
html, body {
max-width: 100%;
overflow-x: hidden;
}
This is because of as in image below...
you can solve this by adding class="container" as you are using bootstrap so the row class should have a parent class container and also assign width:100% to it.
Use overflow-x property for body tag
body{
overflow-x: hidden;
}
overflow-x property
or
Try adding Width : 100% property to your GET STARTED NOW DIV in your HTML.
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