Stylish Auto Show/Hide Scroll Bar On Scrolling

This Article Was Live On April 7th, 2016 And So Far Have: 0 Comments...
Last Updated on April 7th, 2016

Web Page are now gonna long and long so scroll bar is a necessary part of every page but scroll bar is also eating up your width and messing up your page design so try to make it solve in stylish way.

Custom jQuery scrollbars are really important for creating enriched and beautiful web applications and websites. This scripts can help you easily add some amazing custom scrollbars to your website.

CLICK HERE TO SEE DEMO

Table of Contents

Features:

1.) JQuery File Added.
2.) JavaScript Files Added.
3.) Stylish CSS Added.
4.) Simple And Fast Loading Widget.
5.) Can Work With Any Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

JQuery/JavaScript:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'> </script>
<script src='https://googledrive.com/host/0Bz2zRMjP8YuqMWtzaUFickNaZzQ' type='text/javascript'/></script>
<script src='https://googledrive.com/host/0Bz2zRMjP8YuqdHFuOGpwc0Z5TW8' type='text/javascript'/></script>
<script src='https://googledrive.com/host/0Bz2zRMjP8YuqcVpvVnd6VnZCVDQ' type='text/javascript'/></script>

CSS:

<style>
/* -----------------------------------------
Scrollbar
----------------------------------------- */
#ascrail2000 {
background-color: #070503;
width: 12px !important;
padding: 3px;
z-index: 9999 !important;
-webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.3);
}
</style>

Customization:

1.) You Can Add More CSS. If You Are Pro, Then You Can Do Any Thing.

Recommended For You:

Simple Customizable Toast Notification In Vanilla JavaScript

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…