jquery.slimscroll.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474
  1. /*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
  2. * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
  3. * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
  4. *
  5. * Version: 1.3.8
  6. *
  7. */
  8. (function($) {
  9. $.fn.extend({
  10. slimScroll: function(options) {
  11. var defaults = {
  12. // width in pixels of the visible scroll area
  13. width : 'auto',
  14. // height in pixels of the visible scroll area
  15. height : '250px',
  16. // width in pixels of the scrollbar and rail
  17. size : '7px',
  18. // scrollbar color, accepts any hex/color value
  19. color: '#000',
  20. // scrollbar position - left/right
  21. position : 'right',
  22. // distance in pixels between the side edge and the scrollbar
  23. distance : '1px',
  24. // default scroll position on load - top / bottom / $('selector')
  25. start : 'top',
  26. // sets scrollbar opacity
  27. opacity : .4,
  28. // enables always-on mode for the scrollbar
  29. alwaysVisible : false,
  30. // check if we should hide the scrollbar when user is hovering over
  31. disableFadeOut : false,
  32. // sets visibility of the rail
  33. railVisible : false,
  34. // sets rail color
  35. railColor : '#333',
  36. // sets rail opacity
  37. railOpacity : .2,
  38. // whether we should use jQuery UI Draggable to enable bar dragging
  39. railDraggable : true,
  40. // defautlt CSS class of the slimscroll rail
  41. railClass : 'slimScrollRail',
  42. // defautlt CSS class of the slimscroll bar
  43. barClass : 'slimScrollBar',
  44. // defautlt CSS class of the slimscroll wrapper
  45. wrapperClass : 'slimScrollDiv',
  46. // check if mousewheel should scroll the window if we reach top/bottom
  47. allowPageScroll : false,
  48. // scroll amount applied to each mouse wheel step
  49. wheelStep : 20,
  50. // scroll amount applied when user is using gestures
  51. touchScrollStep : 200,
  52. // sets border radius
  53. borderRadius: '7px',
  54. // sets border radius of the rail
  55. railBorderRadius : '7px'
  56. };
  57. var o = $.extend(defaults, options);
  58. // do it for every element that matches selector
  59. this.each(function(){
  60. var isOverPanel, isOverBar, isDragg, queueHide, touchDif,
  61. barHeight, percentScroll, lastScroll,
  62. divS = '<div></div>',
  63. minBarHeight = 30,
  64. releaseScroll = false;
  65. // used in event handlers and for better minification
  66. var me = $(this);
  67. // ensure we are not binding it again
  68. if (me.parent().hasClass(o.wrapperClass))
  69. {
  70. // start from last bar position
  71. var offset = me.scrollTop();
  72. // find bar and rail
  73. bar = me.siblings('.' + o.barClass);
  74. rail = me.siblings('.' + o.railClass);
  75. getBarHeight();
  76. // check if we should scroll existing instance
  77. if ($.isPlainObject(options))
  78. {
  79. // Pass height: auto to an existing slimscroll object to force a resize after contents have changed
  80. if ( 'height' in options && options.height == 'auto' ) {
  81. me.parent().css('height', 'auto');
  82. me.css('height', 'auto');
  83. var height = me.parent().parent().height();
  84. me.parent().css('height', height);
  85. me.css('height', height);
  86. } else if ('height' in options) {
  87. var h = options.height;
  88. me.parent().css('height', h);
  89. me.css('height', h);
  90. }
  91. if ('scrollTo' in options)
  92. {
  93. // jump to a static point
  94. offset = parseInt(o.scrollTo);
  95. }
  96. else if ('scrollBy' in options)
  97. {
  98. // jump by value pixels
  99. offset += parseInt(o.scrollBy);
  100. }
  101. else if ('destroy' in options)
  102. {
  103. // remove slimscroll elements
  104. bar.remove();
  105. rail.remove();
  106. me.unwrap();
  107. return;
  108. }
  109. // scroll content by the given offset
  110. scrollContent(offset, false, true);
  111. }
  112. return;
  113. }
  114. else if ($.isPlainObject(options))
  115. {
  116. if ('destroy' in options)
  117. {
  118. return;
  119. }
  120. }
  121. // optionally set height to the parent's height
  122. o.height = (o.height == 'auto') ? me.parent().height() : o.height;
  123. // wrap content
  124. var wrapper = $(divS)
  125. .addClass(o.wrapperClass)
  126. .css({
  127. position: 'relative',
  128. overflow: 'hidden',
  129. width: o.width,
  130. height: o.height
  131. });
  132. // update style for the div
  133. me.css({
  134. overflow: 'hidden',
  135. width: o.width,
  136. height: o.height
  137. });
  138. // create scrollbar rail
  139. var rail = $(divS)
  140. .addClass(o.railClass)
  141. .css({
  142. width: o.size,
  143. height: '100%',
  144. position: 'absolute',
  145. top: 0,
  146. display: (o.alwaysVisible && o.railVisible) ? 'block' : 'none',
  147. 'border-radius': o.railBorderRadius,
  148. background: o.railColor,
  149. opacity: o.railOpacity,
  150. zIndex: 90
  151. });
  152. // create scrollbar
  153. var bar = $(divS)
  154. .addClass(o.barClass)
  155. .css({
  156. background: o.color,
  157. width: o.size,
  158. position: 'absolute',
  159. top: 0,
  160. opacity: o.opacity,
  161. display: o.alwaysVisible ? 'block' : 'none',
  162. 'border-radius' : o.borderRadius,
  163. BorderRadius: o.borderRadius,
  164. MozBorderRadius: o.borderRadius,
  165. WebkitBorderRadius: o.borderRadius,
  166. zIndex: 99
  167. });
  168. // set position
  169. var posCss = (o.position == 'right') ? { right: o.distance } : { left: o.distance };
  170. rail.css(posCss);
  171. bar.css(posCss);
  172. // wrap it
  173. me.wrap(wrapper);
  174. // append to parent div
  175. me.parent().append(bar);
  176. me.parent().append(rail);
  177. // make it draggable and no longer dependent on the jqueryUI
  178. if (o.railDraggable){
  179. bar.bind("mousedown", function(e) {
  180. var $doc = $(document);
  181. isDragg = true;
  182. t = parseFloat(bar.css('top'));
  183. pageY = e.pageY;
  184. $doc.bind("mousemove.slimscroll", function(e){
  185. currTop = t + e.pageY - pageY;
  186. bar.css('top', currTop);
  187. scrollContent(0, bar.position().top, false);// scroll content
  188. });
  189. $doc.bind("mouseup.slimscroll", function(e) {
  190. isDragg = false;hideBar();
  191. $doc.unbind('.slimscroll');
  192. });
  193. return false;
  194. }).bind("selectstart.slimscroll", function(e){
  195. e.stopPropagation();
  196. e.preventDefault();
  197. return false;
  198. });
  199. }
  200. // on rail over
  201. rail.hover(function(){
  202. showBar();
  203. }, function(){
  204. hideBar();
  205. });
  206. // on bar over
  207. bar.hover(function(){
  208. isOverBar = true;
  209. }, function(){
  210. isOverBar = false;
  211. });
  212. // show on parent mouseover
  213. me.hover(function(){
  214. isOverPanel = true;
  215. showBar();
  216. hideBar();
  217. }, function(){
  218. isOverPanel = false;
  219. hideBar();
  220. });
  221. // support for mobile
  222. me.bind('touchstart', function(e,b){
  223. if (e.originalEvent.touches.length)
  224. {
  225. // record where touch started
  226. touchDif = e.originalEvent.touches[0].pageY;
  227. }
  228. });
  229. me.bind('touchmove', function(e){
  230. // prevent scrolling the page if necessary
  231. if(!releaseScroll)
  232. {
  233. e.originalEvent.preventDefault();
  234. }
  235. if (e.originalEvent.touches.length)
  236. {
  237. // see how far user swiped
  238. var diff = (touchDif - e.originalEvent.touches[0].pageY) / o.touchScrollStep;
  239. // scroll content
  240. scrollContent(diff, true);
  241. touchDif = e.originalEvent.touches[0].pageY;
  242. }
  243. });
  244. // set up initial height
  245. getBarHeight();
  246. // check start position
  247. if (o.start === 'bottom')
  248. {
  249. // scroll content to bottom
  250. bar.css({ top: me.outerHeight() - bar.outerHeight() });
  251. scrollContent(0, true);
  252. }
  253. else if (o.start !== 'top')
  254. {
  255. // assume jQuery selector
  256. scrollContent($(o.start).position().top, null, true);
  257. // make sure bar stays hidden
  258. if (!o.alwaysVisible) { bar.hide(); }
  259. }
  260. // attach scroll events
  261. attachWheel(this);
  262. function _onWheel(e)
  263. {
  264. // use mouse wheel only when mouse is over
  265. if (!isOverPanel) { return; }
  266. var e = e || window.event;
  267. var delta = 0;
  268. if (e.wheelDelta) { delta = -e.wheelDelta/120; }
  269. if (e.detail) { delta = e.detail / 3; }
  270. var target = e.target || e.srcTarget || e.srcElement;
  271. if ($(target).closest('.' + o.wrapperClass).is(me.parent())) {
  272. // scroll content
  273. scrollContent(delta, true);
  274. }
  275. // stop window scroll
  276. if (e.preventDefault && !releaseScroll) { e.preventDefault(); }
  277. if (!releaseScroll) { e.returnValue = false; }
  278. }
  279. function scrollContent(y, isWheel, isJump)
  280. {
  281. releaseScroll = false;
  282. var delta = y;
  283. var maxTop = me.outerHeight() - bar.outerHeight();
  284. if (isWheel)
  285. {
  286. // move bar with mouse wheel
  287. delta = parseInt(bar.css('top')) + y * parseInt(o.wheelStep) / 100 * bar.outerHeight();
  288. // move bar, make sure it doesn't go out
  289. delta = Math.min(Math.max(delta, 0), maxTop);
  290. // if scrolling down, make sure a fractional change to the
  291. // scroll position isn't rounded away when the scrollbar's CSS is set
  292. // this flooring of delta would happened automatically when
  293. // bar.css is set below, but we floor here for clarity
  294. delta = (y > 0) ? Math.ceil(delta) : Math.floor(delta);
  295. // scroll the scrollbar
  296. bar.css({ top: delta + 'px' });
  297. }
  298. // calculate actual scroll amount
  299. percentScroll = parseInt(bar.css('top')) / (me.outerHeight() - bar.outerHeight());
  300. delta = percentScroll * (me[0].scrollHeight - me.outerHeight());
  301. if (isJump)
  302. {
  303. delta = y;
  304. var offsetTop = delta / me[0].scrollHeight * me.outerHeight();
  305. offsetTop = Math.min(Math.max(offsetTop, 0), maxTop);
  306. bar.css({ top: offsetTop + 'px' });
  307. }
  308. // scroll content
  309. me.scrollTop(delta);
  310. // fire scrolling event
  311. me.trigger('slimscrolling', ~~delta);
  312. // ensure bar is visible
  313. showBar();
  314. // trigger hide when scroll is stopped
  315. hideBar();
  316. }
  317. function attachWheel(target)
  318. {
  319. if (window.addEventListener)
  320. {
  321. target.addEventListener('DOMMouseScroll', _onWheel, false );
  322. target.addEventListener('mousewheel', _onWheel, false );
  323. }
  324. else
  325. {
  326. document.attachEvent("onmousewheel", _onWheel)
  327. }
  328. }
  329. function getBarHeight()
  330. {
  331. // calculate scrollbar height and make sure it is not too small
  332. barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);
  333. bar.css({ height: barHeight + 'px' });
  334. // hide scrollbar if content is not long enough
  335. var display = barHeight == me.outerHeight() ? 'none' : 'block';
  336. bar.css({ display: display });
  337. }
  338. function showBar()
  339. {
  340. // recalculate bar height
  341. getBarHeight();
  342. clearTimeout(queueHide);
  343. // when bar reached top or bottom
  344. if (percentScroll == ~~percentScroll)
  345. {
  346. //release wheel
  347. releaseScroll = o.allowPageScroll;
  348. // publish approporiate event
  349. if (lastScroll != percentScroll)
  350. {
  351. var msg = (~~percentScroll == 0) ? 'top' : 'bottom';
  352. me.trigger('slimscroll', msg);
  353. }
  354. }
  355. else
  356. {
  357. releaseScroll = false;
  358. }
  359. lastScroll = percentScroll;
  360. // show only when required
  361. if(barHeight >= me.outerHeight()) {
  362. //allow window scroll
  363. releaseScroll = true;
  364. return;
  365. }
  366. bar.stop(true,true).fadeIn('fast');
  367. if (o.railVisible) { rail.stop(true,true).fadeIn('fast'); }
  368. }
  369. function hideBar()
  370. {
  371. // only hide when options allow it
  372. if (!o.alwaysVisible)
  373. {
  374. queueHide = setTimeout(function(){
  375. if (!(o.disableFadeOut && isOverPanel) && !isOverBar && !isDragg)
  376. {
  377. bar.fadeOut('slow');
  378. rail.fadeOut('slow');
  379. }
  380. }, 1000);
  381. }
  382. }
  383. });
  384. // maintain chainability
  385. return this;
  386. }
  387. });
  388. $.fn.extend({
  389. slimscroll: $.fn.slimScroll
  390. });
  391. })(jQuery);