How to change default Scroll Bar for PHP Web pages

Hey.., Do u know how to change the default scroll bar for your webpages. After a long search in google, i found the solutions. Its very easy to implement also. Just add the below code in <head>–</head> tag. Thats it, your scroll bar is ready. Enjoy šŸ™‚

<style>
::-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);
}
/* For the “inset” look only */
html {
overflow: auto;
}
body {
position: absolute;

overflow-y: scroll;
overflow-x: hidden;
}

/* Let’s get this party started */
::-webkit-scrollbar {
width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
-webkit-border-radius: 10px;
border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(77, 77, 77, 1)
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(204, 230, 255, 1);
}
/* blink properties */
@-webkit-keyframes blink {
from { opacity: 1.0; }
to { opacity: 0.1; }
}

blink {

font-size: 20px;
color: black;
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(1.0,0.5,0.5,1.0);
-webkit-animation-duration: 2s;
}
</style>

Note: This scroll bar supports for only latest version google chrome,maxthon,safari & opera browsers only.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s