Installing the Click & Drag Feature to Replace the Browser Scrollbar

Installing the Click & Drag feature to replace the browser scrollbar has become a current trend, especially with the increasing use of tablet PCs, this technique is growing and widely implemented in various websites.

A week ago, I redesigned the look of my personal site to be simpler, as well as added a blog. However, because it looks simple, I don’t want my site/blog to look “unfinished”.

That’s why I added some features. One of them is the click and drag feature to replace the browser scrollbar function. The click and drag feature of the system works the same as the swipe feature on touchscreen devices.

Interested to put it on your site / blog too? Follow this very easy tutorial.

Resources:
We will need the following resources:

jQuery. Download the latest version of jQuery Download
NiceScroll. Download from GitHub
File Cursor (we will hotlink from Google)
But before entering the tutorial, there are several points that I must mention, namely:

Especially for WordPress. NiceScroll should work in jQuery v.1.5 to v.1.9. But in practice, NiceScroll can’t work in jQuery v.1.8.3 built-in WordPress (v.3.5.1). I don’t recommend you to replace jQuery WordPress with jQuery v.1.9, because that will make a lot of WordPress functions and plugins unable to work. But if you are curious, please try to tinker yourself.
With the click and drag feature, text selection (text block) becomes impossible. So if your site/blog requires text selection, pass the “touchbehavior:true” parameter in this tutorial. Consequently, you will not get the click and drag feature, but your page scrolling will look smoother and more attractive.
Touch Screen
Image by Ebayink

HTML
Basically, it can be applied to any HTML document. Even what you have today (for site/blog owners). Just make sure there is no other jQuery to avoid clashing.

Paste the code to call jQuery into the HTML document, just above the /body tag.

Then for the parameters, use the following code:

$(document).ready(
function() {
$(“html”).niceScroll({touchbehavior:true});
}
);
The full parameters are on the developer’s site or you can download the file provided.

Cursor
Currently, your site/blog page already has a click and drag feature. However, there is one thing that bothers me, namely the cursor does not change to “grab” when we “drag” the page. For that, let’s add a cursor grab with CSS and javascript.

In your CSS file, insert the following stylesheet:

.hand {
cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
.grab {
cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}
Then in the HTML document, paste the following javascript into the body tag:

onmouseup=”this.className=’hand'” onmousedown=”this.className=’grab'”
And done. Please refresh your document, and enjoy the new features of your site/blog.

Results
Here is the result of the tutorial above.