You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

436 lines
16 KiB

4 years ago
  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.6
  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. // start from last bar position
  70. var offset = me.scrollTop();
  71. // find bar and rail
  72. bar = me.closest('.' + o.barClass);
  73. rail = me.closest('.' + o.railClass);
  74. getBarHeight();
  75. // check if we should scroll existing instance
  76. if ($.isPlainObject(options)) {
  77. // Pass height: auto to an existing slimscroll object to force a resize after contents have changed
  78. if ('height' in options && options.height == 'auto') {
  79. me.parent().css('height', 'auto');
  80. me.css('height', 'auto');
  81. var height = me.parent().parent().height();
  82. me.parent().css('height', height);
  83. me.css('height', height);
  84. }
  85. if ('scrollTo' in options) {
  86. // jump to a static point
  87. offset = parseInt(o.scrollTo);
  88. }
  89. else if ('scrollBy' in options) {
  90. // jump by value pixels
  91. offset += parseInt(o.scrollBy);
  92. }
  93. else if ('destroy' in options) {
  94. // remove slimscroll elements
  95. bar.remove();
  96. rail.remove();
  97. me.unwrap();
  98. return;
  99. }
  100. // scroll content by the given offset
  101. scrollContent(offset, false, true);
  102. }
  103. return;
  104. }
  105. else if ($.isPlainObject(options)) {
  106. if ('destroy' in options) {
  107. return;
  108. }
  109. }
  110. // optionally set height to the parent's height
  111. o.height = (o.height == 'auto') ? me.parent().height() : o.height;
  112. // wrap content
  113. var wrapper = $(divS)
  114. .addClass(o.wrapperClass)
  115. .css({
  116. position: 'relative',
  117. overflow: 'hidden',
  118. width: o.width,
  119. height: o.height
  120. });
  121. // update style for the div
  122. me.css({
  123. overflow: 'hidden',
  124. width: o.width,
  125. height: o.height
  126. });
  127. // create scrollbar rail
  128. var rail = $(divS)
  129. .addClass(o.railClass)
  130. .css({
  131. width: o.size,
  132. height: '100%',
  133. position: 'absolute',
  134. top: 0,
  135. display: (o.alwaysVisible && o.railVisible) ? 'block' : 'none',
  136. 'border-radius': o.railBorderRadius,
  137. background: o.railColor,
  138. opacity: o.railOpacity,
  139. zIndex: 90
  140. });
  141. // create scrollbar
  142. var bar = $(divS)
  143. .addClass(o.barClass)
  144. .css({
  145. background: o.color,
  146. width: o.size,
  147. position: 'absolute',
  148. top: 0,
  149. opacity: o.opacity,
  150. display: o.alwaysVisible ? 'block' : 'none',
  151. 'border-radius': o.borderRadius,
  152. BorderRadius: o.borderRadius,
  153. MozBorderRadius: o.borderRadius,
  154. WebkitBorderRadius: o.borderRadius,
  155. zIndex: 99
  156. });
  157. // set position
  158. var posCss = (o.position == 'right') ? { right: o.distance } : { left: o.distance };
  159. rail.css(posCss);
  160. bar.css(posCss);
  161. // wrap it
  162. me.wrap(wrapper);
  163. // append to parent div
  164. me.parent().append(bar);
  165. me.parent().append(rail);
  166. // make it draggable and no longer dependent on the jqueryUI
  167. if (o.railDraggable) {
  168. bar.bind("mousedown", function (e) {
  169. var $doc = $(document);
  170. isDragg = true;
  171. t = parseFloat(bar.css('top'));
  172. pageY = e.pageY;
  173. $doc.bind("mousemove.slimscroll", function (e) {
  174. currTop = t + e.pageY - pageY;
  175. bar.css('top', currTop);
  176. scrollContent(0, bar.position().top, false);// scroll content
  177. });
  178. $doc.bind("mouseup.slimscroll", function (e) {
  179. isDragg = false; hideBar();
  180. $doc.unbind('.slimscroll');
  181. });
  182. return false;
  183. }).bind("selectstart.slimscroll", function (e) {
  184. e.stopPropagation();
  185. e.preventDefault();
  186. return false;
  187. });
  188. }
  189. // on rail over
  190. rail.hover(function () {
  191. showBar();
  192. }, function () {
  193. hideBar();
  194. });
  195. // on bar over
  196. bar.hover(function () {
  197. isOverBar = true;
  198. }, function () {
  199. isOverBar = false;
  200. });
  201. // show on parent mouseover
  202. me.hover(function () {
  203. isOverPanel = true;
  204. showBar();
  205. hideBar();
  206. }, function () {
  207. isOverPanel = false;
  208. hideBar();
  209. });
  210. // support for mobile
  211. me.bind('touchstart', function (e, b) {
  212. if (e.originalEvent.touches.length) {
  213. // record where touch started
  214. touchDif = e.originalEvent.touches[0].pageY;
  215. }
  216. });
  217. me.bind('touchmove', function (e) {
  218. // prevent scrolling the page if necessary
  219. if (!releaseScroll) {
  220. e.originalEvent.preventDefault();
  221. }
  222. if (e.originalEvent.touches.length) {
  223. // see how far user swiped
  224. var diff = (touchDif - e.originalEvent.touches[0].pageY) / o.touchScrollStep;
  225. // scroll content
  226. scrollContent(diff, true);
  227. touchDif = e.originalEvent.touches[0].pageY;
  228. }
  229. });
  230. // set up initial height
  231. getBarHeight();
  232. // check start position
  233. if (o.start === 'bottom') {
  234. // scroll content to bottom
  235. bar.css({ top: me.outerHeight() - bar.outerHeight() });
  236. scrollContent(0, true);
  237. }
  238. else if (o.start !== 'top') {
  239. // assume jQuery selector
  240. scrollContent($(o.start).position().top, null, true);
  241. // make sure bar stays hidden
  242. if (!o.alwaysVisible) { bar.hide(); }
  243. }
  244. // attach scroll events
  245. attachWheel(this);
  246. function _onWheel(e) {
  247. // use mouse wheel only when mouse is over
  248. if (!isOverPanel) { return; }
  249. var e = e || window.event;
  250. var delta = 0;
  251. if (e.wheelDelta) { delta = -e.wheelDelta / 120; }
  252. if (e.detail) { delta = e.detail / 3; }
  253. var target = e.target || e.srcTarget || e.srcElement;
  254. if ($(target).closest('.' + o.wrapperClass).is(me.parent())) {
  255. // scroll content
  256. scrollContent(delta, true);
  257. }
  258. // stop window scroll
  259. if (e.preventDefault && !releaseScroll) { e.preventDefault(); }
  260. if (!releaseScroll) { e.returnValue = false; }
  261. }
  262. function scrollContent(y, isWheel, isJump) {
  263. releaseScroll = false;
  264. var delta = y;
  265. var maxTop = me.outerHeight() - bar.outerHeight();
  266. if (isWheel) {
  267. // move bar with mouse wheel
  268. delta = parseInt(bar.css('top')) + y * parseInt(o.wheelStep) / 100 * bar.outerHeight();
  269. // move bar, make sure it doesn't go out
  270. delta = Math.min(Math.max(delta, 0), maxTop);
  271. // if scrolling down, make sure a fractional change to the
  272. // scroll position isn't rounded away when the scrollbar's CSS is set
  273. // this flooring of delta would happened automatically when
  274. // bar.css is set below, but we floor here for clarity
  275. delta = (y > 0) ? Math.ceil(delta) : Math.floor(delta);
  276. // scroll the scrollbar
  277. bar.css({ top: delta + 'px' });
  278. }
  279. // calculate actual scroll amount
  280. percentScroll = parseInt(bar.css('top')) / (me.outerHeight() - bar.outerHeight());
  281. delta = percentScroll * (me[0].scrollHeight - me.outerHeight());
  282. if (isJump) {
  283. delta = y;
  284. var offsetTop = delta / me[0].scrollHeight * me.outerHeight();
  285. offsetTop = Math.min(Math.max(offsetTop, 0), maxTop);
  286. bar.css({ top: offsetTop + 'px' });
  287. }
  288. // scroll content
  289. me.scrollTop(delta);
  290. // fire scrolling event
  291. me.trigger('slimscrolling', ~~delta);
  292. // ensure bar is visible
  293. showBar();
  294. // trigger hide when scroll is stopped
  295. hideBar();
  296. }
  297. function attachWheel(target) {
  298. if (window.addEventListener) {
  299. target.addEventListener('DOMMouseScroll', _onWheel, false);
  300. target.addEventListener('mousewheel', _onWheel, false);
  301. }
  302. else {
  303. document.attachEvent("onmousewheel", _onWheel)
  304. }
  305. }
  306. function getBarHeight() {
  307. // calculate scrollbar height and make sure it is not too small
  308. barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);
  309. bar.css({ height: barHeight + 'px' });
  310. // hide scrollbar if content is not long enough
  311. var display = barHeight == me.outerHeight() ? 'none' : 'block';
  312. bar.css({ display: display });
  313. }
  314. function showBar() {
  315. // recalculate bar height
  316. getBarHeight();
  317. clearTimeout(queueHide);
  318. // when bar reached top or bottom
  319. if (percentScroll == ~~percentScroll) {
  320. //release wheel
  321. releaseScroll = o.allowPageScroll;
  322. // publish approporiate event
  323. if (lastScroll != percentScroll) {
  324. var msg = (~~percentScroll == 0) ? 'top' : 'bottom';
  325. me.trigger('slimscroll', msg);
  326. }
  327. }
  328. else {
  329. releaseScroll = false;
  330. }
  331. lastScroll = percentScroll;
  332. // show only when required
  333. if (barHeight >= me.outerHeight()) {
  334. //allow window scroll
  335. releaseScroll = true;
  336. return;
  337. }
  338. bar.stop(true, true).fadeIn('fast');
  339. if (o.railVisible) { rail.stop(true, true).fadeIn('fast'); }
  340. }
  341. function hideBar() {
  342. // only hide when options allow it
  343. if (!o.alwaysVisible) {
  344. queueHide = setTimeout(function () {
  345. if (!(o.disableFadeOut && isOverPanel) && !isOverBar && !isDragg) {
  346. bar.fadeOut('slow');
  347. rail.fadeOut('slow');
  348. }
  349. }, 1000);
  350. }
  351. }
  352. });
  353. // maintain chainability
  354. return this;
  355. }
  356. });
  357. $.fn.extend({
  358. slimscroll: $.fn.slimScroll
  359. });
  360. })(jQuery);