Skip to main content

10 jQuery Custom Scrollbar Plugins


10 jQuery Custom Scrollbar Plugins

jQuery Custom Scrollbar Plugins roundup
If you ever wanted to add some custom scrollbars to your website, to scroll the contents and the default browser scrollbars just doesn’t match up with your design, than make sure you check this list of 10 jQuery custom scrollbar plugins. Hope you find the following information helpful.

1. jScrollPane – custom cross-browser scrollbars

Kelvin Luck’s jScrollPane was originally developed in December 2006. It is a jQuery plugin which provides you with custom scrollbars which work consistently across all modern browsers. You can style the scrollbars using simple CSS and they degrade gracefully where JavaScript is disabled.
jScrollPane – custom cross-browser scrollbars

2. Plugin JQuery : Scrollbar

This page is written in french so use Google’s translate service to translate this page to your preferred language. Download is available for the plugin. 
The purpose of this plugin is to add a scrollbar to the item of your choice, to view any content which is larger than the size – vizible space of a div for example. It is aimed to the people who don’t want a default scrollbar. Whell scroll management is also included in this but is not activated.
Plugin JQuery - Scrollbar

3. Tiny Scrollbar – A lightweight jQuery plugin

Tiny Scrollbar can be used for scrolling content. It was built using the javascript jQuery library. Tiny scrollbar was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface. It can scroll vertical or horizontal, supports scrolling by wheel, thumb, or track and the mimified the size is 2,29 kb
Tiny Scrollbar - A lightweight jQuery plugin

4. jQuery Custom Content Scroller

A custom content scroller created with jquery and css that supports mousewheel, scroll easing and has a fully customizable scrollbar. The script utilizes jQuery UI and Brandon Aaron jquery mousewheel plugin. Very easy to configure and style with css.
jQuery Custom Content Scroller

5. jQuery Scrollbar replacements

These scrollbars are fully themable allowing their behaviour to be determined as well as their look. This script uses the ‘jquery.corner’ plugin for the lovely cross-browser rounded corners and ‘jquery.drag’ for more reliable drag event registering.
jQuery Scrollbar replacements

6. Scrollbar Paper

Scrollbar Paper does not replace browser’s default scrollbar.
Instead, it covers it with a custom scrollbar, like paper on a wall: that is why it is called Scrollbar Paper.
The benefit of this approach is that the way browser’s default scrollbar behaves is not modified: mouse wheel support, text selection and scrolling performance are the same as usual.
jQuery Scrollbar Paper

7. A custom scrollbar for a DIV

This tool brings HTML5 range input to all browsers in such a way that you can make it look and behave like you want. This small candy weights only 2.2 Kb. Here the rangeinput is used to control scrolling of a DIV. A little more coding and you can present your products like Apple does.
A custom scrollbar for a DIV jQuery

8. ShortScroll – A jQuery UI Google Wave style scroll bar

Jesse Baird has developed this custom scrollbar as a jQuery UI widget after seeing the scroll bar in Google Wave, which added functionality and style making much better than the browser default scroll bar..CSS3 background gradients to do all of the fancy background stuff so if you plan to support Internet Explorer and care about eye candy, plan on creating your own background images.
ShortScroll - A jQuery UI Google Wave style scroll bar

9. jQuery Scroll

A jQuery plugin which renders a custom, CSS styleable vertical scrollbar.
jQuery Scroll Custom

10. Vertical scrollbar using jQuery UI slider

The code assumes a single div with fixed height (#scroll-pane in my example) which contains an absolutely positioned div (#scroll-content) which contains the content for scrolling.
Vertical scrollbar using jQuery UI slider

Comments

Post a Comment

Popular posts from this blog

List of Best and Worst practices for SEO

Keywords 1 Keywords in <title> tag This is one of the most important places to have a keyword because what is written inside the <title> tag shows in search results as your page title. The title tag must be short (6 or 7 words at most) and the the keyword must be near the beginning. +3 2 Keywords in URL Keywords in URLs help a lot - e.g. -  http://domainname.com/seo-services.html , where “SEO services” is the keyword phrase you attempt to rank well for. But if you don't have the keywords in other parts of the document, don't rely on having them in the URL. +3 3 Keyword density in document text Another very important factor you need to  check . 3-7 % for major keywords is best, 1-2 for minor. Keyword density of over 10% is suspicious and looks more like keyword stuffing, than a naturally written text. +3 4 Keywords in anchor text Also very important, especially for  the anchor text of inbound links , because if you have the...
Post a Comment
Read more

(Solved) Failure sending mail in Godaddy Server

(Solved) Failure sending mail in Godaddy Server I know that this is an old thread.  At the same time, I worked on this problem for two weeks.  I wish that I had the final answer a couple of weeks ago! If you have shared hosting at GoDaddy.com, you need to use these credentials WHILE your are developing your application: In the namespaces you have to add using System.Net.Mail; or if you are not using any .cs file the you can insert namespace as <% @ Import Namespace ="System.Net.Mail" %> //for mail(from,to,subject,message) MailMessage msg = new MailMessage("frommailid@yourdomain.com", " tomailid@yourdomain.com ", "hello" , "your message"); SmtpClient smtp = new SmtpClient (); smtp . Host = "smtpout.secureserver.net" ; // Only works locally (development time) smtp . EnableSsl = false ; smtp . UseDefaultCredentials = false ; smtp . Credentials = new System . Net . NetworkCredential ( "...
3 comments
Read more