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.
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.
Image by Ebayink
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:
The full parameters are on the developer’s site or you can download the file provided.
In your CSS file, insert the following stylesheet:
cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
And done. Please refresh your document, and enjoy the new features of your site/blog.
Here is the result of the tutorial above.