I have a web page with a inner div that should be scrolled. That works fine in IOS5, but when I customize the scrollbars is still see the native one?
How can native scrollbars be removed when using custom ones?
The custom scrollbars seems also only to be updated after scroll complete, how to get them scroll when you are dragging the div?
What I've tried:
::-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);
}
#info{
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 400px;
}
You have to remove
-webkit-overflow-scrolling:touch;
to disable that native scroll
Try this:
.webkitScrollClass {
overflow-y:auto;
overflow-x:hidden;
}
.webkitScrollClass::-webkit-scrollbar {
-webkit-appearance: none;
}
.webkitScrollClass::-webkit-scrollbar:vertical {
width: 6px;
}
.webkitScrollClass::-webkit-scrollbar:horizontal {
height: 6px;
}
.webkitScrollClass::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: rgba(0, 0, 0, .3);
}
Related
I have some overflowing horizontal content and want to have a scrollbar visible always to support Windows devices, but I don't want scrollbars anywhere else. `
::-webkit-scrollbar {
display: none;
}
.polls-row::-webkit-scrollbar {
height: 1rem;
}
.polls-row::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.polls-row::-webkit-scrollbar-thumb {
background-color: $color-border;
border-radius: $radius;
outline: 1px solid slategrey;
}
I have this CSS/sass, which I think should work because the class has higher specificity, however I still don't get a scrollbar on .polls-row
How can I do this?
Update your code with below css
::-webkit-scrollbar {
overflow:hidden;
}
Right Way -> ::-webkit-scrollbar{ overflow:hidden; }
Wrong Way -> ::-webkit-scrollbar{ display:none; }
I have changed overflow CSS but my app design is dark, so I can see white rectangular where both scroll bars converge. How to hide it?
::-webkit-scrollbar {
width: 20px;
cursor: pointer;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #edde5d;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #f09819;
}
Use this CSS as per your convenience, it would work fine :
::-webkit-scrollbar-corner {
background: rgba(0,0,0,0); // transparent or any other color you want
}
I'm using EasyUI Frozen Columns for DataGrid, so how to change jscrollpane style, was trying:
::-webkit-scrollbar {
width: 12px;
}
but that doesn't work.
one solution is to keep the datagrid in div and add a style .scrollpane now apply the css as below:
For Chrome:
div.scroll-pane::-webkit-scrollbar {
width: 12px;
}
/* Track */
div.scroll-pane::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
div.scroll-pane::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255, 156, 0, 0.89);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
div.scroll-pane::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 156, 0, 0.44);
}
For FireFox using jsscrollpane
$(document).ready(function () {
var FIREFOX = /Firefox/i.test(navigator.userAgent);
if (FIREFOX) {
$('.scroll-pane').jScrollPane();
}
});
I am using .table-responsive class to make my Bootstrap tables responsive and it's working fine but the user doesn't have any indicator that the table is horizontally scrollable!
How can I make the horizontal scrollbar always displayed, not only after the user actually starts scrolling.
Edit
The solution mentioned here almost works: Always show scrollbars in iPhone/Android:
::-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;
}
Its problem is showing the scrollbars everywhere, not just to .table-responsive class. How I can restrict it?
Sorry for being 5 years late, but you must add .table-responsive before the pseudo-element, like this:
.table-responsive::-webkit-scrollbar {
-webkit-appearance: none;
}
.table-responsive::-webkit-scrollbar:vertical {
width: 12px;
}
.table-responsive::-webkit-scrollbar:horizontal {
height: 12px;
}
.table-responsive::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
.table-responsive::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
You can enclose your table with:
<div style="overflow-x:scroll;">
If you add overflow-x:scroll to the <768 breakpoint, it will always show the scrollbar below 768px. But as a caveat, it will also show when there is nothing to scroll (i.e. if the table is narrower than 768px)...
#media(max-width:767px){
.table-responsive{overflow-x:scroll;}
}
Another thing you could do is to use a pseudo element.
.<classname>:before {
padding: 2px 5px;
content: "Swipe left to read more";
color: #fff;
background: #333;
}
i have the following code that customizes a webkit scroll bar....
/*webkit scroll bar*/
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0);
}
what i would like to do is customize the scrollbar of a page loaded in firefox the same way... for which i tried the following code..
/*mozilla scroll bar*/
::-moz-scrollbar {
width: 6px;
}
::-moz-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-moz-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-moz-scrollbar-thumb:window-inactive {
background: rgba(255,0,0);
}
but it does not work..... how can i customize the scrollbar in the same way i did for webkit... any help would be appreciated... thanks in advance... :)
You can't because of bug #77790 (Link#1).
Bug 77790 - (scrollbar-colors) Style the scrollbar (binding ::-moz-horizontal-scrollbar to XBL)\
The only way is to use jQuery. I don't know how to code it, so don't ask me. I prepared the following links for jQuery scrollbars. Click here!(Link#2)
Links:
https://bugzilla.mozilla.org/show_bug.cgi?id=77790
http://plugins.jquery.com/custom-scrollbar/
FireFox support these two:
scrollbar-width : auto|thin|none...
scrollbar-color
for firefox now you can use this
.element{
scrollbar-width: thin;
scrollbar-color: blue transparent;
}
where blue is for the thumb and transparent for the track