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 ?
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
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.
Code for Chrome, Opera, Safari for scrollbar as below:
.scroll_bar::-webkit-scrollbar {
width: 20px;
}
.scroll_bar::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0px 0px 6px #0067ab;
border-radius: 5px;
}
.scroll_bar::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0px 0px 6px #0067ab;
border-radius: 5px;
}
And what I should do for Firefox?
would you like to use this.
custom scroll bar using js
There is a solution to your problem on Mozilla Searchfox.
scrollbar[orient='vertical'] {
margin-left: -4px;
margin-top: 1px;
min-width: 3px;
max-width: 3px;
}
scrollbar[orient='vertical'] thumb {
max-width: 3px !important;
min-width: 3px !important;
}
Here you can see it on css tricks
Just change use -moz instead of -webkit
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.
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