• You can style it
• Automatic resize
• Simple API
• It's easy
• It won't do anything on mobile devices (why would you want it anyway?)

Why not?

Installation

<link rel="stylesheet" href="miniscroll.min.css" />
<script src="jquery.1.7.0.js"></script>
<script src="miniscroll.min.js"></script>

Auto initialization
-------------------------

<div class="miniscroll">
  <div class="content">...</div>
</div>

Manual initialization
-------------------------

IMPORTANT: do not use "miniscroll" as classname. 
The auto initialization will execute first,
and break your current settings.

<div class="elm">
  <div class="content">...</div>
</div>

$('.elm').miniscrol({
  'delta' : 41,
  'animate' : true,
  'fullwidth' : true,
  'changeid' : false
});

-- The values above are the default values.
delta : number of pixels moved on +1 deltaY mousewheel.
animate : set animation on/off.
fullwidth : set content as full width, 
	    or apply this width: (content.width - scrollpane.width).
changeid : change all [id] value into mscroll_[id].

PS: You should edit the css

API call

Click the buttons on the left.

Manual Reset

Sometimes, you just need to reset the content.

$('.elm').miniscroll('reset');

Hash value

To support window.location.hash values, and maintain functionality properly, you can choose to add the prefix mscroll_ to all the element ID in your content. You can do so by setting the option changeid: true. You can see the example in the title.

When changeid: true, We don't listen to the hashchange event. Instead, we delegate clicks to $('a[href^=#]'). That way, the hash-based-function will be triggerred even when window.location.hash does't change.