Categories
addScroll plugin jQuery

AddScroll plugin

This plugin will add a vertical scrollbar to a layer which has content deeper than its container parent. It will watch if the window has resized, and adjusts itself. The content can be scrolled on devices with touch interface too.

Syntax

$(layer).addScroll({ options });

options
  • enableKeyboard Enable PgUp and PgDn keys (default = true)
  • enableMouseWheel Enable the mouse wheel (default = true)
  • enableDrag Enable dragging the content with the mouse or touch (default = true) Please note, this functionality disables selecting text content within the layer.
  • dragMinSize the minimum size of the scroll handle (default = 10px)
  • speed the speed of the scrolling (default = 250ms)
  • effect the scrolling animation effect (default = ‘easeOutBack’) Other options: ‘swing’ and ‘linear’
  • disabledOpacity the disabled elements opacity (default = 0.3) (e.g. scroll up button when at the top)
  • wheelIncr the pixels to scroll on one mousewheel (default = 50)
  • rounding rounding radius of the scrollbar (default = 10px)
  • shadows CSS3 shadow effects (default = true)
  • gap the horizontal gap between the content and the scrollbar (default = 3px)

Example

[read-code path="/static/addscroll-plugin/sample.html"]

Requirements

jQuery 1.7 or higher

License

Available for use in all personal or commercial projects under both MIT and GPL licenses.

Copyright (c) 2012 Laszlo Molnar