').addClass('scroll-wrapper').addClass(c.attr('class')) 177 | .css('position', c.css('position') === 'absolute' ? 'absolute' : 'relative') 178 | .insertBefore(c).append(c); 179 | 180 | if (o.isRtl) { 181 | w.addClass('scroll--rtl'); 182 | } 183 | 184 | if (c.is('textarea')) { 185 | this.containerWrapper = cw = $('

').insertBefore(c).append(c); 186 | w.addClass('scroll-textarea'); 187 | } 188 | 189 | cssOptions = { 190 | "height": "auto", 191 | "margin-bottom": browser.scroll.height * -1 + 'px', 192 | "max-height": "" 193 | }; 194 | cssOptions[o.isRtl ? 'margin-left' : 'margin-right'] = browser.scroll.width * -1 + 'px'; 195 | 196 | cw.addClass('scroll-content').css(cssOptions); 197 | 198 | c.on('scroll' + namespace, function (event) { 199 | var scrollLeft = c.scrollLeft(); 200 | var scrollTop = c.scrollTop(); 201 | if (o.isRtl) { 202 | // webkit 0:100 203 | // ie/edge 100:0 204 | // firefox -100:0 205 | switch (true) { 206 | case browser.firefox: 207 | scrollLeft = Math.abs(scrollLeft); 208 | case browser.msedge || browser.msie: 209 | scrollLeft = c[0].scrollWidth - c[0].clientWidth - scrollLeft; 210 | break; 211 | } 212 | } 213 | if ($.isFunction(o.onScroll)) { 214 | o.onScroll.call(S, { 215 | maxScroll: s.y.maxScrollOffset, 216 | scroll: scrollTop, 217 | size: s.y.size, 218 | visible: s.y.visible 219 | }, { 220 | maxScroll: s.x.maxScrollOffset, 221 | scroll: scrollLeft, 222 | size: s.x.size, 223 | visible: s.x.visible 224 | }); 225 | } 226 | s.x.isVisible && s.x.scroll.bar.css('left', scrollLeft * s.x.kx + 'px'); 227 | s.y.isVisible && s.y.scroll.bar.css('top', scrollTop * s.y.kx + 'px'); 228 | }); 229 | 230 | /* prevent native scrollbars to be visible on #anchor click */ 231 | w.on('scroll' + namespace, function () { 232 | w.scrollTop(0).scrollLeft(0); 233 | }); 234 | 235 | if (o.disableBodyScroll) { 236 | var handleMouseScroll = function (event) { 237 | isVerticalScroll(event) ? 238 | s.y.isVisible && s.y.mousewheel(event) : 239 | s.x.isVisible && s.x.mousewheel(event); 240 | }; 241 | w.on('MozMousePixelScroll' + namespace, handleMouseScroll); 242 | w.on('mousewheel' + namespace, handleMouseScroll); 243 | 244 | if (browser.mobile) { 245 | w.on('touchstart' + namespace, function (event) { 246 | var touch = event.originalEvent.touches && event.originalEvent.touches[0] || event; 247 | var originalTouch = { 248 | pageX: touch.pageX, 249 | pageY: touch.pageY 250 | }; 251 | var originalScroll = { 252 | left: c.scrollLeft(), 253 | top: c.scrollTop() 254 | }; 255 | $(document).on('touchmove' + namespace, function (event) { 256 | var touch = event.originalEvent.targetTouches && event.originalEvent.targetTouches[0] || event; 257 | c.scrollLeft(originalScroll.left + originalTouch.pageX - touch.pageX); 258 | c.scrollTop(originalScroll.top + originalTouch.pageY - touch.pageY); 259 | event.preventDefault(); 260 | }); 261 | $(document).on('touchend' + namespace, function () { 262 | $(document).off(namespace); 263 | }); 264 | }); 265 | } 266 | } 267 | if ($.isFunction(o.onInit)) { 268 | o.onInit.apply(this, [c]); 269 | } 270 | } else { 271 | cssOptions = { 272 | "height": "auto", 273 | "margin-bottom": browser.scroll.height * -1 + 'px', 274 | "max-height": "" 275 | }; 276 | cssOptions[o.isRtl ? 'margin-left' : 'margin-right'] = browser.scroll.width * -1 + 'px'; 277 | cw.css(cssOptions); 278 | } 279 | 280 | // init scrollbars & recalculate sizes 281 | $.each(s, function (d, scrollx) { 282 | 283 | var scrollCallback = null; 284 | var scrollForward = 1; 285 | var scrollOffset = (d === 'x') ? 'scrollLeft' : 'scrollTop'; 286 | var scrollStep = o.scrollStep; 287 | var scrollTo = function () { 288 | var currentOffset = c[scrollOffset](); 289 | c[scrollOffset](currentOffset + scrollStep); 290 | if (scrollForward == 1 && (currentOffset + scrollStep) >= scrollToValue) 291 | currentOffset = c[scrollOffset](); 292 | if (scrollForward == -1 && (currentOffset + scrollStep) <= scrollToValue) 293 | currentOffset = c[scrollOffset](); 294 | if (c[scrollOffset]() == currentOffset && scrollCallback) { 295 | scrollCallback(); 296 | } 297 | } 298 | var scrollToValue = 0; 299 | 300 | if (!scrollx.scroll) { 301 | 302 | scrollx.scroll = S._getScroll(o['scroll' + d]).addClass('scroll-' + d); 303 | 304 | if (o.showArrows) { 305 | scrollx.scroll.addClass('scroll-element_arrows_visible'); 306 | } 307 | 308 | scrollx.mousewheel = function (event) { 309 | 310 | if (!scrollx.isVisible || (d === 'x' && isVerticalScroll(event))) { 311 | return true; 312 | } 313 | if (d === 'y' && !isVerticalScroll(event)) { 314 | s.x.mousewheel(event); 315 | return true; 316 | } 317 | 318 | var delta = event.originalEvent.wheelDelta * -1 || event.originalEvent.detail; 319 | var maxScrollValue = scrollx.size - scrollx.visible - scrollx.offset; 320 | 321 | // fix new mozilla 322 | if (!delta) { 323 | if (d === 'x' && !!event.originalEvent.deltaX) { 324 | delta = event.originalEvent.deltaX * 40; 325 | } else if (d === 'y' && !!event.originalEvent.deltaY) { 326 | delta = event.originalEvent.deltaY * 40; 327 | } 328 | } 329 | 330 | if ((delta > 0 && scrollToValue < maxScrollValue) || (delta < 0 && scrollToValue > 0)) { 331 | scrollToValue = scrollToValue + delta; 332 | if (scrollToValue < 0) 333 | scrollToValue = 0; 334 | if (scrollToValue > maxScrollValue) 335 | scrollToValue = maxScrollValue; 336 | 337 | S.scrollTo = S.scrollTo || {}; 338 | S.scrollTo[scrollOffset] = scrollToValue; 339 | setTimeout(function () { 340 | if (S.scrollTo) { 341 | c.stop().animate(S.scrollTo, 240, 'linear', function () { 342 | scrollToValue = c[scrollOffset](); 343 | }); 344 | S.scrollTo = null; 345 | } 346 | }, 1); 347 | } 348 | 349 | event.preventDefault(); 350 | return false; 351 | }; 352 | 353 | scrollx.scroll 354 | .on('MozMousePixelScroll' + namespace, scrollx.mousewheel) 355 | .on('mousewheel' + namespace, scrollx.mousewheel) 356 | .on('mouseenter' + namespace, function () { 357 | scrollToValue = c[scrollOffset](); 358 | }); 359 | 360 | // handle arrows & scroll inner mousedown event 361 | scrollx.scroll.find('.scroll-arrow, .scroll-element_track') 362 | .on('mousedown' + namespace, function (event) { 363 | 364 | if (event.which != 1) // lmb 365 | return true; 366 | 367 | scrollForward = 1; 368 | 369 | var data = { 370 | eventOffset: event[(d === 'x') ? 'pageX' : 'pageY'], 371 | maxScrollValue: scrollx.size - scrollx.visible - scrollx.offset, 372 | scrollbarOffset: scrollx.scroll.bar.offset()[(d === 'x') ? 'left' : 'top'], 373 | scrollbarSize: scrollx.scroll.bar[(d === 'x') ? 'outerWidth' : 'outerHeight']() 374 | }; 375 | var timeout = 0, timer = 0; 376 | 377 | if ($(this).hasClass('scroll-arrow')) { 378 | scrollForward = $(this).hasClass("scroll-arrow_more") ? 1 : -1; 379 | scrollStep = o.scrollStep * scrollForward; 380 | scrollToValue = scrollForward > 0 ? data.maxScrollValue : 0; 381 | if (o.isRtl) { 382 | switch(true){ 383 | case browser.firefox: 384 | scrollToValue = scrollForward > 0 ? 0: data.maxScrollValue * -1; 385 | break; 386 | case browser.msie || browser.msedge: 387 | break; 388 | } 389 | } 390 | } else { 391 | scrollForward = (data.eventOffset > (data.scrollbarOffset + data.scrollbarSize) ? 1 392 | : (data.eventOffset < data.scrollbarOffset ? -1 : 0)); 393 | if(d === 'x' && o.isRtl && (browser.msie || browser.msedge)) 394 | scrollForward = scrollForward * -1; 395 | scrollStep = Math.round(scrollx.visible * 0.75) * scrollForward; 396 | scrollToValue = (data.eventOffset - data.scrollbarOffset - 397 | (o.stepScrolling ? (scrollForward == 1 ? data.scrollbarSize : 0) 398 | : Math.round(data.scrollbarSize / 2))); 399 | scrollToValue = c[scrollOffset]() + (scrollToValue / scrollx.kx); 400 | } 401 | 402 | S.scrollTo = S.scrollTo || {}; 403 | S.scrollTo[scrollOffset] = o.stepScrolling ? c[scrollOffset]() + scrollStep : scrollToValue; 404 | 405 | if (o.stepScrolling) { 406 | scrollCallback = function () { 407 | scrollToValue = c[scrollOffset](); 408 | clearInterval(timer); 409 | clearTimeout(timeout); 410 | timeout = 0; 411 | timer = 0; 412 | }; 413 | timeout = setTimeout(function () { 414 | timer = setInterval(scrollTo, 40); 415 | }, o.duration + 100); 416 | } 417 | 418 | setTimeout(function () { 419 | if (S.scrollTo) { 420 | c.animate(S.scrollTo, o.duration); 421 | S.scrollTo = null; 422 | } 423 | }, 1); 424 | 425 | return S._handleMouseDown(scrollCallback, event); 426 | }); 427 | 428 | // handle scrollbar drag'n'drop 429 | scrollx.scroll.bar.on('mousedown' + namespace, function (event) { 430 | 431 | if (event.which != 1) // lmb 432 | return true; 433 | 434 | var eventPosition = event[(d === 'x') ? 'pageX' : 'pageY']; 435 | var initOffset = c[scrollOffset](); 436 | 437 | scrollx.scroll.addClass('scroll-draggable'); 438 | 439 | $(document).on('mousemove' + namespace, function (event) { 440 | var diff = parseInt((event[(d === 'x') ? 'pageX' : 'pageY'] - eventPosition) / scrollx.kx, 10); 441 | if (d === 'x' && o.isRtl && (browser.msie || browser.msedge)) 442 | diff = diff * -1; 443 | c[scrollOffset](initOffset + diff); 444 | }); 445 | 446 | return S._handleMouseDown(function () { 447 | scrollx.scroll.removeClass('scroll-draggable'); 448 | scrollToValue = c[scrollOffset](); 449 | }, event); 450 | }); 451 | } 452 | }); 453 | 454 | // remove classes & reset applied styles 455 | $.each(s, function (d, scrollx) { 456 | var scrollClass = 'scroll-scroll' + d + '_visible'; 457 | var scrolly = (d == "x") ? s.y : s.x; 458 | 459 | scrollx.scroll.removeClass(scrollClass); 460 | scrolly.scroll.removeClass(scrollClass); 461 | cw.removeClass(scrollClass); 462 | }); 463 | 464 | // calculate init sizes 465 | $.each(s, function (d, scrollx) { 466 | $.extend(scrollx, (d == "x") ? { 467 | offset: parseInt(c.css('left'), 10) || 0, 468 | size: c.prop('scrollWidth'), 469 | visible: w.width() 470 | } : { 471 | offset: parseInt(c.css('top'), 10) || 0, 472 | size: c.prop('scrollHeight'), 473 | visible: w.height() 474 | }); 475 | }); 476 | 477 | // update scrollbar visibility/dimensions 478 | this._updateScroll('x', this.scrollx); 479 | this._updateScroll('y', this.scrolly); 480 | 481 | if ($.isFunction(o.onUpdate)) { 482 | o.onUpdate.apply(this, [c]); 483 | } 484 | 485 | // calculate scroll size 486 | $.each(s, function (d, scrollx) { 487 | 488 | var cssOffset = (d === 'x') ? 'left' : 'top'; 489 | var cssFullSize = (d === 'x') ? 'outerWidth' : 'outerHeight'; 490 | var cssSize = (d === 'x') ? 'width' : 'height'; 491 | var offset = parseInt(c.css(cssOffset), 10) || 0; 492 | 493 | var AreaSize = scrollx.size; 494 | var AreaVisible = scrollx.visible + offset; 495 | 496 | var scrollSize = scrollx.scroll.size[cssFullSize]() + (parseInt(scrollx.scroll.size.css(cssOffset), 10) || 0); 497 | 498 | if (o.autoScrollSize) { 499 | scrollx.scrollbarSize = parseInt(scrollSize * AreaVisible / AreaSize, 10); 500 | scrollx.scroll.bar.css(cssSize, scrollx.scrollbarSize + 'px'); 501 | } 502 | 503 | scrollx.scrollbarSize = scrollx.scroll.bar[cssFullSize](); 504 | scrollx.kx = ((scrollSize - scrollx.scrollbarSize) / (AreaSize - AreaVisible)) || 1; 505 | scrollx.maxScrollOffset = AreaSize - AreaVisible; 506 | }); 507 | 508 | c.scrollLeft(initScroll.scrollLeft).scrollTop(initScroll.scrollTop).trigger('scroll'); 509 | }, 510 | /** 511 | * Get scrollx/scrolly object 512 | * 513 | * @param {Mixed} scroll 514 | * @returns {jQuery} scroll object 515 | */ 516 | _getScroll: function (scroll) { 517 | var types = { 518 | advanced: [ 519 | '

', 520 | '

', 521 | '

', 522 | '

', 523 | '

', 524 | '

', // required! used for scrollbar size calculation ! 525 | '

', 526 | '

', // used for handling scrollbar click 527 | '

', 528 | '

', 529 | '

', 530 | '

', // required 531 | '

', 532 | '

', 533 | '

', 534 | '

', 535 | '

', 536 | '

', 537 | '

', 538 | '

' 539 | ].join(''), 540 | simple: [ 541 | '

', 542 | '

', 543 | '

', // required! used for scrollbar size calculation ! 544 | '

', // used for handling scrollbar click 545 | '

', // required 546 | '

', 547 | '

' 548 | ].join('') 549 | }; 550 | if (types[scroll]) { 551 | scroll = types[scroll]; 552 | } 553 | if (!scroll) { 554 | scroll = types['simple']; 555 | } 556 | if (typeof (scroll) == 'string') { 557 | scroll = $(scroll).appendTo(this.wrapper); 558 | } else { 559 | scroll = $(scroll); 560 | } 561 | $.extend(scroll, { 562 | bar: scroll.find('.scroll-bar'), 563 | size: scroll.find('.scroll-element_size'), 564 | track: scroll.find('.scroll-element_track') 565 | }); 566 | return scroll; 567 | }, 568 | _handleMouseDown: function (callback, event) { 569 | 570 | var namespace = this.namespace; 571 | 572 | $(document).on('blur' + namespace, function () { 573 | $(document).add('body').off(namespace); 574 | callback && callback(); 575 | }); 576 | $(document).on('dragstart' + namespace, function (event) { 577 | event.preventDefault(); 578 | return false; 579 | }); 580 | $(document).on('mouseup' + namespace, function () { 581 | $(document).add('body').off(namespace); 582 | callback && callback(); 583 | }); 584 | $('body').on('selectstart' + namespace, function (event) { 585 | event.preventDefault(); 586 | return false; 587 | }); 588 | 589 | event && event.preventDefault(); 590 | return false; 591 | }, 592 | _updateScroll: function (d, scrollx) { 593 | 594 | var container = this.container, 595 | containerWrapper = this.containerWrapper || container, 596 | scrollClass = 'scroll-scroll' + d + '_visible', 597 | scrolly = (d === 'x') ? this.scrolly : this.scrollx, 598 | offset = parseInt(this.container.css((d === 'x') ? 'left' : 'top'), 10) || 0, 599 | wrapper = this.wrapper; 600 | 601 | var AreaSize = scrollx.size; 602 | var AreaVisible = scrollx.visible + offset; 603 | 604 | scrollx.isVisible = (AreaSize - AreaVisible) > 1; // bug in IE9/11 with 1px diff 605 | if (scrollx.isVisible) { 606 | scrollx.scroll.addClass(scrollClass); 607 | scrolly.scroll.addClass(scrollClass); 608 | containerWrapper.addClass(scrollClass); 609 | } else { 610 | scrollx.scroll.removeClass(scrollClass); 611 | scrolly.scroll.removeClass(scrollClass); 612 | containerWrapper.removeClass(scrollClass); 613 | } 614 | 615 | if (d === 'y') { 616 | if (container.is('textarea') || AreaSize < AreaVisible) { 617 | containerWrapper.css({ 618 | "height": (AreaVisible + browser.scroll.height) + 'px', 619 | "max-height": "none" 620 | }); 621 | } else { 622 | containerWrapper.css({ 623 | //"height": "auto", // do not reset height value: issue with height:100%! 624 | "max-height": (AreaVisible + browser.scroll.height) + 'px' 625 | }); 626 | } 627 | } 628 | 629 | if (scrollx.size != container.prop('scrollWidth') 630 | || scrolly.size != container.prop('scrollHeight') 631 | || scrollx.visible != wrapper.width() 632 | || scrolly.visible != wrapper.height() 633 | || scrollx.offset != (parseInt(container.css('left'), 10) || 0) 634 | || scrolly.offset != (parseInt(container.css('top'), 10) || 0) 635 | ) { 636 | $.extend(this.scrollx, { 637 | offset: parseInt(container.css('left'), 10) || 0, 638 | size: container.prop('scrollWidth'), 639 | visible: wrapper.width() 640 | }); 641 | $.extend(this.scrolly, { 642 | offset: parseInt(container.css('top'), 10) || 0, 643 | size: this.container.prop('scrollHeight'), 644 | visible: wrapper.height() 645 | }); 646 | this._updateScroll(d === 'x' ? 'y' : 'x', scrolly); 647 | } 648 | } 649 | }; 650 | 651 | var CustomScrollbar = BaseScrollbar; 652 | 653 | /* 654 | * Extend jQuery as plugin 655 | * 656 | * @param {Mixed} command to execute 657 | * @param {Mixed} arguments as Array 658 | * @return {jQuery} 659 | */ 660 | $.fn.scrollbar = function (command, args) { 661 | if (typeof command !== 'string') { 662 | args = command; 663 | command = 'init'; 664 | } 665 | if (typeof args === 'undefined') { 666 | args = []; 667 | } 668 | if (!$.isArray(args)) { 669 | args = [args]; 670 | } 671 | this.not('body, .scroll-wrapper').each(function () { 672 | var element = $(this), 673 | instance = element.data(browser.data.name); 674 | if (instance || command === 'init') { 675 | if (!instance) { 676 | instance = new CustomScrollbar(element); 677 | } 678 | if (instance[command]) { 679 | instance[command].apply(instance, args); 680 | } 681 | } 682 | }); 683 | return this; 684 | }; 685 | 686 | /** 687 | * Connect default options to global object 688 | */ 689 | $.fn.scrollbar.options = defaults; 690 | 691 | 692 | /** 693 | * Check if scroll content/container size is changed 694 | */ 695 | 696 | var updateScrollbars = (function () { 697 | var timer = 0, 698 | timerCounter = 0; 699 | 700 | return function (force) { 701 | var i, container, options, scroll, wrapper, scrollx, scrolly; 702 | for (i = 0; i < browser.scrolls.length; i++) { 703 | scroll = browser.scrolls[i]; 704 | container = scroll.container; 705 | options = scroll.options; 706 | wrapper = scroll.wrapper; 707 | scrollx = scroll.scrollx; 708 | scrolly = scroll.scrolly; 709 | if (force || (options.autoUpdate && wrapper && wrapper.is(':visible') && 710 | (container.prop('scrollWidth') != scrollx.size || container.prop('scrollHeight') != scrolly.size || wrapper.width() != scrollx.visible || wrapper.height() != scrolly.visible))) { 711 | scroll.init(); 712 | 713 | if (options.debug) { 714 | window.console && console.log({ 715 | scrollHeight: container.prop('scrollHeight') + ':' + scroll.scrolly.size, 716 | scrollWidth: container.prop('scrollWidth') + ':' + scroll.scrollx.size, 717 | visibleHeight: wrapper.height() + ':' + scroll.scrolly.visible, 718 | visibleWidth: wrapper.width() + ':' + scroll.scrollx.visible 719 | }, true); 720 | timerCounter++; 721 | } 722 | } 723 | } 724 | if (debug && timerCounter > 10) { 725 | window.console && console.log('Scroll updates exceed 10'); 726 | updateScrollbars = function () {}; 727 | } else { 728 | clearTimeout(timer); 729 | timer = setTimeout(updateScrollbars, 300); 730 | } 731 | }; 732 | })(); 733 | 734 | /* ADDITIONAL FUNCTIONS */ 735 | /** 736 | * Get native browser scrollbar size (height/width) 737 | * 738 | * @param {Boolean} actual size or CSS size, default - CSS size 739 | * @returns {Object} with height, width 740 | */ 741 | function getBrowserScrollSize(actualSize) { 742 | 743 | if (browser.webkit && !actualSize) { 744 | return { 745 | height: 0, 746 | width: 0 747 | }; 748 | } 749 | 750 | if (!browser.data.outer) { 751 | var css = { 752 | "border": "none", 753 | "box-sizing": "content-box", 754 | "height": "200px", 755 | "margin": "0", 756 | "padding": "0", 757 | "width": "200px" 758 | }; 759 | browser.data.inner = $("

").css($.extend({}, css)); 760 | browser.data.outer = $("

").css($.extend({ 761 | "left": "-1000px", 762 | "overflow": "scroll", 763 | "position": "absolute", 764 | "top": "-1000px" 765 | }, css)).append(browser.data.inner).appendTo("body"); 766 | } 767 | 768 | browser.data.outer.scrollLeft(1000).scrollTop(1000); 769 | 770 | return { 771 | height: Math.ceil((browser.data.outer.offset().top - browser.data.inner.offset().top) || 0), 772 | width: Math.ceil((browser.data.outer.offset().left - browser.data.inner.offset().left) || 0) 773 | }; 774 | } 775 | 776 | /** 777 | * Check if native browser scrollbars overlay content 778 | * 779 | * @returns {Boolean} 780 | */ 781 | function isScrollOverlaysContent() { 782 | var scrollSize = getBrowserScrollSize(true); 783 | return !(scrollSize.height || scrollSize.width); 784 | } 785 | 786 | function isVerticalScroll(event) { 787 | var e = event.originalEvent; 788 | if (e.axis && e.axis === e.HORIZONTAL_AXIS) 789 | return false; 790 | if (e.wheelDeltaX) 791 | return false; 792 | return true; 793 | } 794 | 795 | 796 | /** 797 | * Extend AngularJS as UI directive 798 | * and expose a provider for override default config 799 | * 800 | */ 801 | if (window.angular) { 802 | (function (angular) { 803 | angular.module('jQueryScrollbar', []) 804 | .provider('jQueryScrollbar', function () { 805 | var defaultOptions = defaults; 806 | return { 807 | setOptions: function (options) { 808 | angular.extend(defaultOptions, options); 809 | }, 810 | $get: function () { 811 | return { 812 | options: angular.copy(defaultOptions) 813 | }; 814 | } 815 | }; 816 | }) 817 | .directive('jqueryScrollbar', ['jQueryScrollbar', '$parse', function (jQueryScrollbar, $parse) { 818 | return { 819 | restrict: "AC", 820 | link: function (scope, element, attrs) { 821 | var model = $parse(attrs.jqueryScrollbar), 822 | options = model(scope); 823 | element.scrollbar(options || jQueryScrollbar.options) 824 | .on('$destroy', function () { 825 | element.scrollbar('destroy'); 826 | }); 827 | } 828 | }; 829 | }]); 830 | })(window.angular); 831 | } 832 | })); 833 | -------------------------------------------------------------------------------- /jquery.scrollbar.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jQuery CSS Customizable Scrollbar 3 | * 4 | * Copyright 2015, Yuriy Khabarov 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * 7 | * If you found bug, please contact me via email <13real008@gmail.com> 8 | * 9 | * Compressed by http://jscompress.com/ 10 | * 11 | * @author Yuriy Khabarov aka Gromo 12 | * @version 0.2.11 13 | * @url https://github.com/gromo/jquery.scrollbar/ 14 | * 15 | */ 16 | !function(a,b){"function"==typeof define&&define.amd?define(["jquery"],b):b("undefined"!=typeof exports?require("jquery"):a.jQuery)}(this,function(a){"use strict";function h(b){if(c.webkit&&!b)return{height:0,width:0};if(!c.data.outer){var d={border:"none","box-sizing":"content-box",height:"200px",margin:"0",padding:"0",width:"200px"};c.data.inner=a("

").css(a.extend({},d)),c.data.outer=a("

").css(a.extend({left:"-1000px",overflow:"scroll",position:"absolute",top:"-1000px"},d)).append(c.data.inner).appendTo("body")}return c.data.outer.scrollLeft(1e3).scrollTop(1e3),{height:Math.ceil(c.data.outer.offset().top-c.data.inner.offset().top||0),width:Math.ceil(c.data.outer.offset().left-c.data.inner.offset().left||0)}}function i(){var a=h(!0);return!(a.height||a.width)}function j(a){var b=a.originalEvent;return(!b.axis||b.axis!==b.HORIZONTAL_AXIS)&&!b.wheelDeltaX}var b=!1,c={data:{index:0,name:"scrollbar"},firefox:/firefox/i.test(navigator.userAgent),macosx:/mac/i.test(navigator.platform),msedge:/edge\/\d+/i.test(navigator.userAgent),msie:/(msie|trident)/i.test(navigator.userAgent),mobile:/android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent),overlay:null,scroll:null,scrolls:[],webkit:/webkit/i.test(navigator.userAgent)&&!/edge\/\d+/i.test(navigator.userAgent)};c.scrolls.add=function(a){this.remove(a).push(a)},c.scrolls.remove=function(b){for(;a.inArray(b,this)>=0;)this.splice(a.inArray(b,this),1);return this};var d={autoScrollSize:!0,autoUpdate:!0,debug:!1,disableBodyScroll:!1,duration:200,ignoreMobile:!1,ignoreOverlay:!1,isRtl:!1,scrollStep:30,showArrows:!1,stepScrolling:!0,scrollx:null,scrolly:null,onDestroy:null,onFallback:null,onInit:null,onScroll:null,onUpdate:null},e=function(b){c.scroll||(c.overlay=i(),c.scroll=h(),g(),a(window).resize(function(){var a=!1;if(c.scroll&&(c.scroll.height||c.scroll.width)){var b=h();b.height===c.scroll.height&&b.width===c.scroll.width||(c.scroll=b,a=!0)}g(a)})),this.container=b,this.namespace=".scrollbar_"+c.data.index++,this.options=a.extend({},d,window.jQueryScrollbarOptions||{}),this.scrollTo=null,this.scrollx={},this.scrolly={},b.data(c.data.name,this),c.scrolls.add(this)};e.prototype={destroy:function(){if(this.wrapper){this.container.removeData(c.data.name),c.scrolls.remove(this);var b=this.container.scrollLeft(),d=this.container.scrollTop();this.container.insertBefore(this.wrapper).css({height:"",margin:"","max-height":""}).removeClass("scroll-content scroll-scrollx_visible scroll-scrolly_visible").off(this.namespace).scrollLeft(b).scrollTop(d),this.scrollx.scroll.removeClass("scroll-scrollx_visible").find("div").addBack().off(this.namespace),this.scrolly.scroll.removeClass("scroll-scrolly_visible").find("div").addBack().off(this.namespace),this.wrapper.remove(),a(document).add("body").off(this.namespace),a.isFunction(this.options.onDestroy)&&this.options.onDestroy.apply(this,[this.container])}},init:function(b){var d=this,e=this.container,f=this.containerWrapper||e,g=this.namespace,h=a.extend(this.options,b||{}),i={x:this.scrollx,y:this.scrolly},k=this.wrapper,l={},m={scrollLeft:e.scrollLeft(),scrollTop:e.scrollTop()};if(c.mobile&&h.ignoreMobile||c.overlay&&h.ignoreOverlay||c.macosx&&!c.webkit)return a.isFunction(h.onFallback)&&h.onFallback.apply(this,[e]),!1;if(k)l={height:"auto","margin-bottom":c.scroll.height*-1+"px","max-height":""},l[h.isRtl?"margin-left":"margin-right"]=c.scroll.width*-1+"px",f.css(l);else{if(this.wrapper=k=a("

").addClass("scroll-wrapper").addClass(e.attr("class")).css("position","absolute"===e.css("position")?"absolute":"relative").insertBefore(e).append(e),h.isRtl&&k.addClass("scroll--rtl"),e.is("textarea")&&(this.containerWrapper=f=a("

").insertBefore(e).append(e),k.addClass("scroll-textarea")),l={height:"auto","margin-bottom":c.scroll.height*-1+"px","max-height":""},l[h.isRtl?"margin-left":"margin-right"]=c.scroll.width*-1+"px",f.addClass("scroll-content").css(l),e.on("scroll"+g,function(b){var f=e.scrollLeft(),g=e.scrollTop();if(h.isRtl)switch(!0){case c.firefox:f=Math.abs(f);case c.msedge||c.msie:f=e[0].scrollWidth-e[0].clientWidth-f}a.isFunction(h.onScroll)&&h.onScroll.call(d,{maxScroll:i.y.maxScrollOffset,scroll:g,size:i.y.size,visible:i.y.visible},{maxScroll:i.x.maxScrollOffset,scroll:f,size:i.x.size,visible:i.x.visible}),i.x.isVisible&&i.x.scroll.bar.css("left",f*i.x.kx+"px"),i.y.isVisible&&i.y.scroll.bar.css("top",g*i.y.kx+"px")}),k.on("scroll"+g,function(){k.scrollTop(0).scrollLeft(0)}),h.disableBodyScroll){var n=function(a){j(a)?i.y.isVisible&&i.y.mousewheel(a):i.x.isVisible&&i.x.mousewheel(a)};k.on("MozMousePixelScroll"+g,n),k.on("mousewheel"+g,n),c.mobile&&k.on("touchstart"+g,function(b){var c=b.originalEvent.touches&&b.originalEvent.touches[0]||b,d={pageX:c.pageX,pageY:c.pageY},f={left:e.scrollLeft(),top:e.scrollTop()};a(document).on("touchmove"+g,function(a){var b=a.originalEvent.targetTouches&&a.originalEvent.targetTouches[0]||a;e.scrollLeft(f.left+d.pageX-b.pageX),e.scrollTop(f.top+d.pageY-b.pageY),a.preventDefault()}),a(document).on("touchend"+g,function(){a(document).off(g)})})}a.isFunction(h.onInit)&&h.onInit.apply(this,[e])}a.each(i,function(b,f){var k=null,l=1,m="x"===b?"scrollLeft":"scrollTop",n=h.scrollStep,o=function(){var a=e[m]();e[m](a+n),1==l&&a+n>=p&&(a=e[m]()),l==-1&&a+n<=p&&(a=e[m]()),e[m]()==a&&k&&k()},p=0;f.scroll||(f.scroll=d._getScroll(h["scroll"+b]).addClass("scroll-"+b),h.showArrows&&f.scroll.addClass("scroll-element_arrows_visible"),f.mousewheel=function(a){if(!f.isVisible||"x"===b&&j(a))return!0;if("y"===b&&!j(a))return i.x.mousewheel(a),!0;var c=a.originalEvent.wheelDelta*-1||a.originalEvent.detail,g=f.size-f.visible-f.offset;return c||("x"===b&&a.originalEvent.deltaX?c=40*a.originalEvent.deltaX:"y"===b&&a.originalEvent.deltaY&&(c=40*a.originalEvent.deltaY)),(c>0&&p0)&&(p+=c,p<0&&(p=0),p>g&&(p=g),d.scrollTo=d.scrollTo||{},d.scrollTo[m]=p,setTimeout(function(){d.scrollTo&&(e.stop().animate(d.scrollTo,240,"linear",function(){p=e[m]()}),d.scrollTo=null)},1)),a.preventDefault(),!1},f.scroll.on("MozMousePixelScroll"+g,f.mousewheel).on("mousewheel"+g,f.mousewheel).on("mouseenter"+g,function(){p=e[m]()}),f.scroll.find(".scroll-arrow, .scroll-element_track").on("mousedown"+g,function(g){if(1!=g.which)return!0;l=1;var i={eventOffset:g["x"===b?"pageX":"pageY"],maxScrollValue:f.size-f.visible-f.offset,scrollbarOffset:f.scroll.bar.offset()["x"===b?"left":"top"],scrollbarSize:f.scroll.bar["x"===b?"outerWidth":"outerHeight"]()},j=0,q=0;if(a(this).hasClass("scroll-arrow")){if(l=a(this).hasClass("scroll-arrow_more")?1:-1,n=h.scrollStep*l,p=l>0?i.maxScrollValue:0,h.isRtl)switch(!0){case c.firefox:p=l>0?0:i.maxScrollValue*-1;break;case c.msie||c.msedge:}}else l=i.eventOffset>i.scrollbarOffset+i.scrollbarSize?1:i.eventOffset','

','

',"

","

",'

','

',"

",'

','

',"

","

"].join(""),simple:['

','

',"

","

"].join("")};return c[b]&&(b=c[b]),b||(b=c.simple),b="string"==typeof b?a(b).appendTo(this.wrapper):a(b),a.extend(b,{bar:b.find(".scroll-bar"),size:b.find(".scroll-element_size"),track:b.find(".scroll-element_track")}),b},_handleMouseDown:function(b,c){var d=this.namespace;return a(document).on("blur"+d,function(){a(document).add("body").off(d),b&&b()}),a(document).on("dragstart"+d,function(a){return a.preventDefault(),!1}),a(document).on("mouseup"+d,function(){a(document).add("body").off(d),b&&b()}),a("body").on("selectstart"+d,function(a){return a.preventDefault(),!1}),c&&c.preventDefault(),!1},_updateScroll:function(b,d){var e=this.container,f=this.containerWrapper||e,g="scroll-scroll"+b+"_visible",h="x"===b?this.scrolly:this.scrollx,i=parseInt(this.container.css("x"===b?"left":"top"),10)||0,j=this.wrapper,k=d.size,l=d.visible+i;d.isVisible=k-l>1,d.isVisible?(d.scroll.addClass(g),h.scroll.addClass(g),f.addClass(g)):(d.scroll.removeClass(g),h.scroll.removeClass(g),f.removeClass(g)),"y"===b&&(e.is("textarea")||k10?(window.console&&console.log("Scroll updates exceed 10"),g=function(){}):(clearTimeout(a),a=setTimeout(g,300))}}();window.angular&&!function(a){a.module("jQueryScrollbar",[]).provider("jQueryScrollbar",function(){var b=d;return{setOptions:function(c){a.extend(b,c)},$get:function(){return{options:a.copy(b)}}}}).directive("jqueryScrollbar",["jQueryScrollbar","$parse",function(a,b){return{restrict:"AC",link:function(c,d,e){var f=b(e.jqueryScrollbar),g=f(c);d.scrollbar(g||a.options).on("$destroy",function(){d.scrollbar("destroy")})}}}])}(window.angular)}); -------------------------------------------------------------------------------- /license-gpl.txt: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc. 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | Preamble 10 | 11 | The licenses for most software are designed to take away your 12 | freedom to share and change it. By contrast, the GNU General Public 13 | License is intended to guarantee your freedom to share and change free 14 | software--to make sure the software is free for all its users. This 15 | General Public License applies to most of the Free Software 16 | Foundation's software and to any other program whose authors commit to 17 | using it. (Some other Free Software Foundation software is covered by 18 | the GNU Lesser General Public License instead.) You can apply it to 19 | your programs, too. 20 | 21 | When we speak of free software, we are referring to freedom, not 22 | price. Our General Public Licenses are designed to make sure that you 23 | have the freedom to distribute copies of free software (and charge for 24 | this service if you wish), that you receive source code or can get it 25 | if you want it, that you can change the software or use pieces of it 26 | in new free programs; and that you know you can do these things. 27 | 28 | To protect your rights, we need to make restrictions that forbid 29 | anyone to deny you these rights or to ask you to surrender the rights. 30 | These restrictions translate to certain responsibilities for you if you 31 | distribute copies of the software, or if you modify it. 32 | 33 | For example, if you distribute copies of such a program, whether 34 | gratis or for a fee, you must give the recipients all the rights that 35 | you have. You must make sure that they, too, receive or can get the 36 | source code. And you must show them these terms so they know their 37 | rights. 38 | 39 | We protect your rights with two steps: (1) copyright the software, and 40 | (2) offer you this license which gives you legal permission to copy, 41 | distribute and/or modify the software. 42 | 43 | Also, for each author's protection and ours, we want to make certain 44 | that everyone understands that there is no warranty for this free 45 | software. If the software is modified by someone else and passed on, we 46 | want its recipients to know that what they have is not the original, so 47 | that any problems introduced by others will not reflect on the original 48 | authors' reputations. 49 | 50 | Finally, any free program is threatened constantly by software 51 | patents. We wish to avoid the danger that redistributors of a free 52 | program will individually obtain patent licenses, in effect making the 53 | program proprietary. To prevent this, we have made it clear that any 54 | patent must be licensed for everyone's free use or not licensed at all. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | GNU GENERAL PUBLIC LICENSE 60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 61 | 62 | 0. This License applies to any program or other work which contains 63 | a notice placed by the copyright holder saying it may be distributed 64 | under the terms of this General Public License. The "Program", below, 65 | refers to any such program or work, and a "work based on the Program" 66 | means either the Program or any derivative work under copyright law: 67 | that is to say, a work containing the Program or a portion of it, 68 | either verbatim or with modifications and/or translated into another 69 | language. (Hereinafter, translation is included without limitation in 70 | the term "modification".) Each licensee is addressed as "you". 71 | 72 | Activities other than copying, distribution and modification are not 73 | covered by this License; they are outside its scope. The act of 74 | running the Program is not restricted, and the output from the Program 75 | is covered only if its contents constitute a work based on the 76 | Program (independent of having been made by running the Program). 77 | Whether that is true depends on what the Program does. 78 | 79 | 1. You may copy and distribute verbatim copies of the Program's 80 | source code as you receive it, in any medium, provided that you 81 | conspicuously and appropriately publish on each copy an appropriate 82 | copyright notice and disclaimer of warranty; keep intact all the 83 | notices that refer to this License and to the absence of any warranty; 84 | and give any other recipients of the Program a copy of this License 85 | along with the Program. 86 | 87 | You may charge a fee for the physical act of transferring a copy, and 88 | you may at your option offer warranty protection in exchange for a fee. 89 | 90 | 2. You may modify your copy or copies of the Program or any portion 91 | of it, thus forming a work based on the Program, and copy and 92 | distribute such modifications or work under the terms of Section 1 93 | above, provided that you also meet all of these conditions: 94 | 95 | a) You must cause the modified files to carry prominent notices 96 | stating that you changed the files and the date of any change. 97 | 98 | b) You must cause any work that you distribute or publish, that in 99 | whole or in part contains or is derived from the Program or any 100 | part thereof, to be licensed as a whole at no charge to all third 101 | parties under the terms of this License. 102 | 103 | c) If the modified program normally reads commands interactively 104 | when run, you must cause it, when started running for such 105 | interactive use in the most ordinary way, to print or display an 106 | announcement including an appropriate copyright notice and a 107 | notice that there is no warranty (or else, saying that you provide 108 | a warranty) and that users may redistribute the program under 109 | these conditions, and telling the user how to view a copy of this 110 | License. (Exception: if the Program itself is interactive but 111 | does not normally print such an announcement, your work based on 112 | the Program is not required to print an announcement.) 113 | 114 | These requirements apply to the modified work as a whole. If 115 | identifiable sections of that work are not derived from the Program, 116 | and can be reasonably considered independent and separate works in 117 | themselves, then this License, and its terms, do not apply to those 118 | sections when you distribute them as separate works. But when you 119 | distribute the same sections as part of a whole which is a work based 120 | on the Program, the distribution of the whole must be on the terms of 121 | this License, whose permissions for other licensees extend to the 122 | entire whole, and thus to each and every part regardless of who wrote it. 123 | 124 | Thus, it is not the intent of this section to claim rights or contest 125 | your rights to work written entirely by you; rather, the intent is to 126 | exercise the right to control the distribution of derivative or 127 | collective works based on the Program. 128 | 129 | In addition, mere aggregation of another work not based on the Program 130 | with the Program (or with a work based on the Program) on a volume of 131 | a storage or distribution medium does not bring the other work under 132 | the scope of this License. 133 | 134 | 3. You may copy and distribute the Program (or a work based on it, 135 | under Section 2) in object code or executable form under the terms of 136 | Sections 1 and 2 above provided that you also do one of the following: 137 | 138 | a) Accompany it with the complete corresponding machine-readable 139 | source code, which must be distributed under the terms of Sections 140 | 1 and 2 above on a medium customarily used for software interchange; or, 141 | 142 | b) Accompany it with a written offer, valid for at least three 143 | years, to give any third party, for a charge no more than your 144 | cost of physically performing source distribution, a complete 145 | machine-readable copy of the corresponding source code, to be 146 | distributed under the terms of Sections 1 and 2 above on a medium 147 | customarily used for software interchange; or, 148 | 149 | c) Accompany it with the information you received as to the offer 150 | to distribute corresponding source code. (This alternative is 151 | allowed only for noncommercial distribution and only if you 152 | received the program in object code or executable form with such 153 | an offer, in accord with Subsection b above.) 154 | 155 | The source code for a work means the preferred form of the work for 156 | making modifications to it. For an executable work, complete source 157 | code means all the source code for all modules it contains, plus any 158 | associated interface definition files, plus the scripts used to 159 | control compilation and installation of the executable. However, as a 160 | special exception, the source code distributed need not include 161 | anything that is normally distributed (in either source or binary 162 | form) with the major components (compiler, kernel, and so on) of the 163 | operating system on which the executable runs, unless that component 164 | itself accompanies the executable. 165 | 166 | If distribution of executable or object code is made by offering 167 | access to copy from a designated place, then offering equivalent 168 | access to copy the source code from the same place counts as 169 | distribution of the source code, even though third parties are not 170 | compelled to copy the source along with the object code. 171 | 172 | 4. You may not copy, modify, sublicense, or distribute the Program 173 | except as expressly provided under this License. Any attempt 174 | otherwise to copy, modify, sublicense or distribute the Program is 175 | void, and will automatically terminate your rights under this License. 176 | However, parties who have received copies, or rights, from you under 177 | this License will not have their licenses terminated so long as such 178 | parties remain in full compliance. 179 | 180 | 5. You are not required to accept this License, since you have not 181 | signed it. However, nothing else grants you permission to modify or 182 | distribute the Program or its derivative works. These actions are 183 | prohibited by law if you do not accept this License. Therefore, by 184 | modifying or distributing the Program (or any work based on the 185 | Program), you indicate your acceptance of this License to do so, and 186 | all its terms and conditions for copying, distributing or modifying 187 | the Program or works based on it. 188 | 189 | 6. Each time you redistribute the Program (or any work based on the 190 | Program), the recipient automatically receives a license from the 191 | original licensor to copy, distribute or modify the Program subject to 192 | these terms and conditions. You may not impose any further 193 | restrictions on the recipients' exercise of the rights granted herein. 194 | You are not responsible for enforcing compliance by third parties to 195 | this License. 196 | 197 | 7. If, as a consequence of a court judgment or allegation of patent 198 | infringement or for any other reason (not limited to patent issues), 199 | conditions are imposed on you (whether by court order, agreement or 200 | otherwise) that contradict the conditions of this License, they do not 201 | excuse you from the conditions of this License. If you cannot 202 | distribute so as to satisfy simultaneously your obligations under this 203 | License and any other pertinent obligations, then as a consequence you 204 | may not distribute the Program at all. For example, if a patent 205 | license would not permit royalty-free redistribution of the Program by 206 | all those who receive copies directly or indirectly through you, then 207 | the only way you could satisfy both it and this License would be to 208 | refrain entirely from distribution of the Program. 209 | 210 | If any portion of this section is held invalid or unenforceable under 211 | any particular circumstance, the balance of the section is intended to 212 | apply and the section as a whole is intended to apply in other 213 | circumstances. 214 | 215 | It is not the purpose of this section to induce you to infringe any 216 | patents or other property right claims or to contest validity of any 217 | such claims; this section has the sole purpose of protecting the 218 | integrity of the free software distribution system, which is 219 | implemented by public license practices. Many people have made 220 | generous contributions to the wide range of software distributed 221 | through that system in reliance on consistent application of that 222 | system; it is up to the author/donor to decide if he or she is willing 223 | to distribute software through any other system and a licensee cannot 224 | impose that choice. 225 | 226 | This section is intended to make thoroughly clear what is believed to 227 | be a consequence of the rest of this License. 228 | 229 | 8. If the distribution and/or use of the Program is restricted in 230 | certain countries either by patents or by copyrighted interfaces, the 231 | original copyright holder who places the Program under this License 232 | may add an explicit geographical distribution limitation excluding 233 | those countries, so that distribution is permitted only in or among 234 | countries not thus excluded. In such case, this License incorporates 235 | the limitation as if written in the body of this License. 236 | 237 | 9. The Free Software Foundation may publish revised and/or new versions 238 | of the General Public License from time to time. Such new versions will 239 | be similar in spirit to the present version, but may differ in detail to 240 | address new problems or concerns. 241 | 242 | Each version is given a distinguishing version number. If the Program 243 | specifies a version number of this License which applies to it and "any 244 | later version", you have the option of following the terms and conditions 245 | either of that version or of any later version published by the Free 246 | Software Foundation. If the Program does not specify a version number of 247 | this License, you may choose any version ever published by the Free Software 248 | Foundation. 249 | 250 | 10. If you wish to incorporate parts of the Program into other free 251 | programs whose distribution conditions are different, write to the author 252 | to ask for permission. For software which is copyrighted by the Free 253 | Software Foundation, write to the Free Software Foundation; we sometimes 254 | make exceptions for this. Our decision will be guided by the two goals 255 | of preserving the free status of all derivatives of our free software and 256 | of promoting the sharing and reuse of software generally. 257 | 258 | NO WARRANTY 259 | 260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 268 | REPAIR OR CORRECTION. 269 | 270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 278 | POSSIBILITY OF SUCH DAMAGES. 279 | -------------------------------------------------------------------------------- /license-mit.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 Yuriy Khabarov <13real008@gmail.com> 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /meteor/tests.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Tinytest.add('Scrollbar integration', function (test) { 4 | 5 | var div = document.createElement('div'); 6 | div.className = 'scrollbar-inner'; 7 | div.value = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in."; 8 | var scrollBar = jQuery('.scrollbar-inner').scrollbar(); 9 | console.log(scrollBar); 10 | test.isNotNull(scrollBar, 'instantiation OK'); 11 | }); -------------------------------------------------------------------------------- /package.js: -------------------------------------------------------------------------------- 1 | // package metadata file for Meteor.js 2 | 'use strict'; 3 | 4 | var packageName = 'gromo:jquery.scrollbar'; // https://atmospherejs.com/mediatainment/switchery 5 | var where = 'client'; // where to install: 'client' or 'server'. For both, pass nothing. 6 | 7 | Package.describe({ 8 | name: packageName, 9 | version: '0.2.11', 10 | // Brief, one-line summary of the package. 11 | summary: 'Cross-browser CSS customizable scrollbar with advanced features.', 12 | // URL to the Git repository containing the source code for this package. 13 | git: 'git@github.com:gromo/jquery.scrollbar.git' 14 | }); 15 | 16 | Package.onUse(function (api) { 17 | api.versionsFrom(['METEOR@0.9.0', 'METEOR@1.0']); 18 | api.use('jquery', where); 19 | api.addFiles(['jquery.scrollbar.js', 'jquery.scrollbar.css'], where); 20 | }); 21 | 22 | Package.onTest(function (api) { 23 | api.use([packageName, 'sanjo:jasmine'], where); 24 | api.use(['webapp','tinytest'], where); 25 | api.addFiles('meteor/tests.js', where); // testing specific files 26 | }); 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery.scrollbar", 3 | "version": "0.2.11", 4 | "description": "Cross-browser CSS customizable scrollbar", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/gromo/jquery.scrollbar.git" 12 | }, 13 | "keywords": [ 14 | "jquery", 15 | "scrollbar", 16 | "angular", 17 | "textarea" 18 | ], 19 | "author": "Yuriy Khabarov", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/gromo/jquery.scrollbar/issues" 23 | }, 24 | "homepage": "https://github.com/gromo/jquery.scrollbar" 25 | } 26 | -------------------------------------------------------------------------------- /sass/Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | grunt.initConfig({ 3 | pkg: grunt.file.readJSON('package.json'), 4 | compass: { 5 | auto: { 6 | options: { 7 | sassDir: './', 8 | cssDir: '../' 9 | } 10 | } 11 | }, 12 | watch: { 13 | scss: { 14 | files: ['./**/*.scss'], 15 | tasks: ['compass'] 16 | } 17 | } 18 | }); 19 | grunt.loadNpmTasks('grunt-contrib-compass'); 20 | grunt.loadNpmTasks('grunt-contrib-watch'); 21 | grunt.registerTask('default', ['watch']); 22 | }; -------------------------------------------------------------------------------- /sass/config.rb: -------------------------------------------------------------------------------- 1 | require 'compass/import-once/activate' 2 | line_comments = false 3 | -------------------------------------------------------------------------------- /sass/jquery.scrollbar.scss: -------------------------------------------------------------------------------- 1 | /*************** SCROLLBAR BASE CSS ***************/ 2 | 3 | .scroll-wrapper { 4 | overflow: hidden !important; 5 | padding: 0 !important; 6 | position: relative; 7 | 8 | & > .scroll-content { 9 | border: none !important; 10 | box-sizing: content-box !important; 11 | height: auto; 12 | left: 0; 13 | margin: 0; 14 | max-height: none; 15 | max-width: none !important; 16 | overflow: scroll !important; 17 | padding: 0; 18 | position: relative !important; 19 | top: 0; 20 | width: auto !important; 21 | 22 | &::-webkit-scrollbar { 23 | height: 0; 24 | width: 0; 25 | } 26 | } 27 | &.scroll--rtl { 28 | direction: rtl; 29 | } 30 | } 31 | 32 | .scroll-element { 33 | box-sizing: content-box; 34 | display: none; 35 | 36 | div { 37 | box-sizing: content-box; 38 | } 39 | .scroll-bar, 40 | .scroll-arrow { 41 | cursor: default; 42 | } 43 | 44 | &.scroll-x.scroll-scrollx_visible, 45 | &.scroll-y.scroll-scrolly_visible { 46 | display: block; 47 | } 48 | } 49 | 50 | .scroll-textarea { 51 | border: 1px solid #cccccc; 52 | border-top-color: #999999; 53 | 54 | & > .scroll-content { 55 | overflow: hidden !important; 56 | 57 | & > textarea { 58 | border: none !important; 59 | box-sizing: border-box; 60 | height: 100% !important; 61 | margin: 0; 62 | max-height: none !important; 63 | max-width: none !important; 64 | overflow: scroll !important; 65 | outline: none; 66 | padding: 2px; 67 | position: relative !important; 68 | top: 0; 69 | width: 100% !important; 70 | 71 | &::-webkit-scrollbar { 72 | height: 0; 73 | width: 0; 74 | } 75 | } 76 | } 77 | } 78 | 79 | 80 | 81 | 82 | /*************** SIMPLE INNER SCROLLBAR ***************/ 83 | 84 | .scrollbar-inner > .scroll-element, 85 | .scrollbar-inner > .scroll-element div 86 | { 87 | border: none; 88 | margin: 0; 89 | padding: 0; 90 | position: absolute; 91 | z-index: 10; 92 | } 93 | 94 | .scrollbar-inner > .scroll-element div { 95 | display: block; 96 | height: 100%; 97 | left: 0; 98 | top: 0; 99 | width: 100%; 100 | } 101 | 102 | .scrollbar-inner > .scroll-element.scroll-x { 103 | bottom: 2px; 104 | height: 8px; 105 | left: 0; 106 | width: 100%; 107 | } 108 | 109 | .scrollbar-inner > .scroll-element.scroll-y { 110 | height: 100%; 111 | right: 2px; 112 | top: 0; 113 | width: 8px; 114 | } 115 | 116 | .scrollbar-inner > .scroll-element .scroll-element_outer { 117 | overflow: hidden; 118 | } 119 | 120 | .scrollbar-inner > .scroll-element .scroll-element_outer, 121 | .scrollbar-inner > .scroll-element .scroll-element_track, 122 | .scrollbar-inner > .scroll-element .scroll-bar { 123 | -webkit-border-radius: 8px; 124 | -moz-border-radius: 8px; 125 | border-radius: 8px; 126 | } 127 | 128 | .scrollbar-inner > .scroll-element .scroll-element_track, 129 | .scrollbar-inner > .scroll-element .scroll-bar { 130 | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; 131 | filter: alpha(opacity=40); 132 | opacity: 0.4; 133 | } 134 | 135 | .scrollbar-inner > .scroll-element .scroll-element_track { background-color: #e0e0e0; } 136 | .scrollbar-inner > .scroll-element .scroll-bar { background-color: #c2c2c2; } 137 | .scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #919191; } 138 | .scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; } 139 | 140 | 141 | /* update scrollbar offset if both scrolls are visible */ 142 | 143 | .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; } 144 | .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; } 145 | 146 | 147 | .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; } 148 | .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; } 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | /*************** SIMPLE OUTER SCROLLBAR ***************/ 160 | 161 | .scrollbar-outer > .scroll-element, 162 | .scrollbar-outer > .scroll-element div 163 | { 164 | border: none; 165 | margin: 0; 166 | padding: 0; 167 | position: absolute; 168 | z-index: 10; 169 | } 170 | 171 | .scrollbar-outer > .scroll-element { 172 | background-color: #ffffff; 173 | } 174 | 175 | .scrollbar-outer > .scroll-element div { 176 | display: block; 177 | height: 100%; 178 | left: 0; 179 | top: 0; 180 | width: 100%; 181 | } 182 | 183 | .scrollbar-outer > .scroll-element.scroll-x { 184 | bottom: 0; 185 | height: 12px; 186 | left: 0; 187 | width: 100%; 188 | } 189 | 190 | .scrollbar-outer > .scroll-element.scroll-y { 191 | height: 100%; 192 | right: 0; 193 | top: 0; 194 | width: 12px; 195 | } 196 | 197 | .scrollbar-outer > .scroll-element.scroll-x .scroll-element_outer { height: 8px; top: 2px; } 198 | .scrollbar-outer > .scroll-element.scroll-y .scroll-element_outer { left: 2px; width: 8px; } 199 | 200 | .scrollbar-outer > .scroll-element .scroll-element_outer { overflow: hidden; } 201 | .scrollbar-outer > .scroll-element .scroll-element_track { background-color: #eeeeee; } 202 | 203 | .scrollbar-outer > .scroll-element .scroll-element_outer, 204 | .scrollbar-outer > .scroll-element .scroll-element_track, 205 | .scrollbar-outer > .scroll-element .scroll-bar { 206 | -webkit-border-radius: 8px; 207 | -moz-border-radius: 8px; 208 | border-radius: 8px; 209 | } 210 | 211 | .scrollbar-outer > .scroll-element .scroll-bar { background-color: #d9d9d9; } 212 | .scrollbar-outer > .scroll-element .scroll-bar:hover { background-color: #c2c2c2; } 213 | .scrollbar-outer > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; } 214 | 215 | 216 | /* scrollbar height/width & offset from container borders */ 217 | 218 | .scrollbar-outer > .scroll-content.scroll-scrolly_visible { left: -12px; margin-left: 12px; } 219 | .scrollbar-outer > .scroll-content.scroll-scrollx_visible { top: -12px; margin-top: 12px; } 220 | 221 | .scrollbar-outer > .scroll-element.scroll-x .scroll-bar { min-width: 10px; } 222 | .scrollbar-outer > .scroll-element.scroll-y .scroll-bar { min-height: 10px; } 223 | 224 | 225 | /* update scrollbar offset if both scrolls are visible */ 226 | 227 | .scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -14px; } 228 | .scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -14px; } 229 | 230 | .scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -14px; } 231 | .scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -14px; } 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | /*************** SCROLLBAR MAC OS X ***************/ 243 | 244 | .scrollbar-macosx > .scroll-element, 245 | .scrollbar-macosx > .scroll-element div 246 | { 247 | background: none; 248 | border: none; 249 | margin: 0; 250 | padding: 0; 251 | position: absolute; 252 | z-index: 10; 253 | } 254 | 255 | .scrollbar-macosx > .scroll-element div { 256 | display: block; 257 | height: 100%; 258 | left: 0; 259 | top: 0; 260 | width: 100%; 261 | } 262 | 263 | .scrollbar-macosx > .scroll-element .scroll-element_track { display: none; } 264 | .scrollbar-macosx > .scroll-element .scroll-bar { 265 | background-color: #6C6E71; 266 | display: block; 267 | 268 | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 269 | filter: alpha(opacity=0); 270 | opacity: 0; 271 | 272 | -webkit-border-radius: 7px; 273 | -moz-border-radius: 7px; 274 | border-radius: 7px; 275 | 276 | -webkit-transition: opacity 0.2s linear; 277 | -moz-transition: opacity 0.2s linear; 278 | -o-transition: opacity 0.2s linear; 279 | -ms-transition: opacity 0.2s linear; 280 | transition: opacity 0.2s linear; 281 | } 282 | .scrollbar-macosx:hover > .scroll-element .scroll-bar, 283 | .scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar { 284 | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 285 | filter: alpha(opacity=70); 286 | opacity: 0.7; 287 | } 288 | 289 | 290 | .scrollbar-macosx > .scroll-element.scroll-x { 291 | bottom: 0px; 292 | height: 0px; 293 | left: 0; 294 | min-width: 100%; 295 | overflow: visible; 296 | width: 100%; 297 | } 298 | 299 | .scrollbar-macosx > .scroll-element.scroll-y { 300 | height: 100%; 301 | min-height: 100%; 302 | right: 0px; 303 | top: 0; 304 | width: 0px; 305 | } 306 | 307 | /* scrollbar height/width & offset from container borders */ 308 | .scrollbar-macosx > .scroll-element.scroll-x .scroll-bar { height: 7px; min-width: 10px; top: -9px; } 309 | .scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { left: -9px; min-height: 10px; width: 7px; } 310 | 311 | .scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer { left: 2px; } 312 | .scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size { left: -4px; } 313 | 314 | .scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer { top: 2px; } 315 | .scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size { top: -4px; } 316 | 317 | /* update scrollbar offset if both scrolls are visible */ 318 | .scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; } 319 | .scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; } 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | /*************** SCROLLBAR LIGHT ***************/ 331 | 332 | .scrollbar-light > .scroll-element, 333 | .scrollbar-light > .scroll-element div { 334 | border: none; 335 | margin: 0; 336 | overflow: hidden; 337 | padding: 0; 338 | position: absolute; 339 | z-index: 10; 340 | } 341 | 342 | .scrollbar-light > .scroll-element { 343 | background-color: #ffffff; 344 | } 345 | 346 | .scrollbar-light > .scroll-element div { 347 | display: block; 348 | height: 100%; 349 | left: 0; 350 | top: 0; 351 | width: 100%; 352 | } 353 | 354 | .scrollbar-light > .scroll-element .scroll-element_outer { 355 | -webkit-border-radius: 10px; 356 | -moz-border-radius: 10px; 357 | border-radius: 10px; 358 | } 359 | 360 | .scrollbar-light > .scroll-element .scroll-element_size { 361 | background: #dbdbdb; 362 | background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+'); 363 | background: -moz-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%); 364 | background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dbdbdb), color-stop(100%,#e8e8e8)); 365 | background: -webkit-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%); 366 | background: -o-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%); 367 | background: -ms-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%); 368 | background: linear-gradient(to right, #dbdbdb 0%,#e8e8e8 100%); 369 | 370 | -webkit-border-radius: 10px; 371 | -moz-border-radius: 10px; 372 | border-radius: 10px; 373 | } 374 | 375 | .scrollbar-light > .scroll-element.scroll-x { 376 | bottom: 0; 377 | height: 17px; 378 | left: 0; 379 | min-width: 100%; 380 | width: 100%; 381 | } 382 | 383 | .scrollbar-light > .scroll-element.scroll-y { 384 | height: 100%; 385 | min-height: 100%; 386 | right: 0; 387 | top: 0; 388 | width: 17px; 389 | } 390 | 391 | .scrollbar-light > .scroll-element .scroll-bar { 392 | background: #fefefe; 393 | background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+'); 394 | background: -moz-linear-gradient(left, #fefefe 0%, #f5f5f5 100%); 395 | background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fefefe), color-stop(100%,#f5f5f5)); 396 | background: -webkit-linear-gradient(left, #fefefe 0%,#f5f5f5 100%); 397 | background: -o-linear-gradient(left, #fefefe 0%,#f5f5f5 100%); 398 | background: -ms-linear-gradient(left, #fefefe 0%,#f5f5f5 100%); 399 | background: linear-gradient(to right, #fefefe 0%,#f5f5f5 100%); 400 | 401 | border: 1px solid #dbdbdb; 402 | -webkit-border-radius: 10px; 403 | -moz-border-radius: 10px; 404 | border-radius: 10px; 405 | } 406 | 407 | /* scrollbar height/width & offset from container borders */ 408 | 409 | .scrollbar-light > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; } 410 | .scrollbar-light > .scroll-content.scroll-scrollx_visible { top: -17px; margin-top: 17px; } 411 | 412 | .scrollbar-light > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 0px; } 413 | .scrollbar-light > .scroll-element.scroll-y .scroll-bar { left: 0px; min-height: 10px; width: 10px; } 414 | 415 | .scrollbar-light > .scroll-element.scroll-x .scroll-element_outer { height: 12px; left: 2px; top: 2px; } 416 | .scrollbar-light > .scroll-element.scroll-x .scroll-element_size { left: -4px; } 417 | 418 | .scrollbar-light > .scroll-element.scroll-y .scroll-element_outer { left: 2px; top: 2px; width: 12px; } 419 | .scrollbar-light > .scroll-element.scroll-y .scroll-element_size { top: -4px; } 420 | 421 | /* update scrollbar offset if both scrolls are visible */ 422 | 423 | .scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; } 424 | .scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; } 425 | 426 | .scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; } 427 | .scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; } 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | /*************** SCROLLBAR RAIL ***************/ 439 | 440 | .scrollbar-rail > .scroll-element, 441 | .scrollbar-rail > .scroll-element div 442 | { 443 | border: none; 444 | margin: 0; 445 | overflow: hidden; 446 | padding: 0; 447 | position: absolute; 448 | z-index: 10; 449 | } 450 | 451 | .scrollbar-rail > .scroll-element { 452 | background-color: #ffffff; 453 | } 454 | 455 | .scrollbar-rail > .scroll-element div { 456 | display: block; 457 | height: 100%; 458 | left: 0; 459 | top: 0; 460 | width: 100%; 461 | } 462 | 463 | .scrollbar-rail > .scroll-element .scroll-element_size { 464 | background-color: #999; 465 | background-color: rgba(0, 0, 0, 0.3); 466 | } 467 | 468 | .scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-element_size { 469 | background-color: #666; 470 | background-color: rgba(0, 0, 0, 0.5); 471 | } 472 | 473 | .scrollbar-rail > .scroll-element.scroll-x { 474 | bottom: 0; 475 | height: 12px; 476 | left: 0; 477 | min-width: 100%; 478 | padding: 3px 0 2px; 479 | width: 100%; 480 | } 481 | 482 | .scrollbar-rail > .scroll-element.scroll-y { 483 | height: 100%; 484 | min-height: 100%; 485 | padding: 0 2px 0 3px; 486 | right: 0; 487 | top: 0; 488 | width: 12px; 489 | } 490 | 491 | .scrollbar-rail > .scroll-element .scroll-bar { 492 | background-color: #d0b9a0; 493 | 494 | -webkit-border-radius: 2px; 495 | -moz-border-radius: 2px; 496 | border-radius: 2px; 497 | 498 | box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); 499 | } 500 | 501 | .scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-bar { 502 | box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); 503 | } 504 | 505 | /* scrollbar height/width & offset from container borders */ 506 | 507 | .scrollbar-rail > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; } 508 | .scrollbar-rail > .scroll-content.scroll-scrollx_visible { margin-top: 17px; top: -17px; } 509 | 510 | .scrollbar-rail > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 1px; } 511 | .scrollbar-rail > .scroll-element.scroll-y .scroll-bar { left: 1px; min-height: 10px; width: 10px; } 512 | 513 | .scrollbar-rail > .scroll-element.scroll-x .scroll-element_outer { height: 15px; left: 5px; } 514 | .scrollbar-rail > .scroll-element.scroll-x .scroll-element_size { height: 2px; left: -10px; top: 5px; } 515 | 516 | .scrollbar-rail > .scroll-element.scroll-y .scroll-element_outer { top: 5px; width: 15px; } 517 | .scrollbar-rail > .scroll-element.scroll-y .scroll-element_size { left: 5px; top: -10px; width: 2px; } 518 | 519 | /* update scrollbar offset if both scrolls are visible */ 520 | 521 | .scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -25px; } 522 | .scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -25px; } 523 | 524 | .scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -25px; } 525 | .scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -25px; } 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | /*************** SCROLLBAR DYNAMIC ***************/ 537 | 538 | .scrollbar-dynamic > .scroll-element, 539 | .scrollbar-dynamic > .scroll-element div 540 | { 541 | background: none; 542 | border: none; 543 | margin: 0; 544 | padding: 0; 545 | position: absolute; 546 | z-index: 10; 547 | } 548 | 549 | .scrollbar-dynamic > .scroll-element div { 550 | display: block; 551 | height: 100%; 552 | left: 0; 553 | top: 0; 554 | width: 100%; 555 | } 556 | 557 | .scrollbar-dynamic > .scroll-element.scroll-x { 558 | bottom: 2px; 559 | height: 7px; 560 | left: 0; 561 | min-width: 100%; 562 | width: 100%; 563 | } 564 | 565 | .scrollbar-dynamic > .scroll-element.scroll-y { 566 | height: 100%; 567 | min-height: 100%; 568 | right: 2px; 569 | top: 0; 570 | width: 7px; 571 | } 572 | 573 | .scrollbar-dynamic > .scroll-element .scroll-element_outer { 574 | opacity: 0.3; 575 | 576 | -webkit-border-radius: 12px; 577 | -moz-border-radius: 12px; 578 | border-radius: 12px; 579 | } 580 | .scrollbar-dynamic > .scroll-element .scroll-element_size { 581 | background-color: #cccccc; 582 | opacity: 0; 583 | 584 | -webkit-border-radius: 12px; 585 | -moz-border-radius: 12px; 586 | border-radius: 12px; 587 | 588 | -webkit-transition: opacity 0.2s; 589 | -moz-transition: opacity 0.2s; 590 | -o-transition: opacity 0.2s; 591 | -ms-transition: opacity 0.2s; 592 | transition: opacity 0.2s; 593 | } 594 | 595 | .scrollbar-dynamic > .scroll-element .scroll-bar { 596 | background-color: #6c6e71; 597 | 598 | -webkit-border-radius: 7px; 599 | -moz-border-radius: 7px; 600 | border-radius: 7px; 601 | } 602 | 603 | /* scrollbar height/width & offset from container borders */ 604 | 605 | .scrollbar-dynamic > .scroll-element.scroll-x .scroll-bar { 606 | bottom: 0; 607 | height: 7px; 608 | min-width: 24px; 609 | top: auto; 610 | } 611 | .scrollbar-dynamic > .scroll-element.scroll-y .scroll-bar { 612 | left: auto; 613 | min-height: 24px; 614 | right: 0; 615 | width: 7px; 616 | } 617 | 618 | .scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_outer { 619 | bottom: 0; 620 | top: auto; 621 | left: 2px; 622 | 623 | -webkit-transition: height 0.2s; 624 | -moz-transition: height 0.2s; 625 | -o-transition: height 0.2s; 626 | -ms-transition: height 0.2s; 627 | transition: height 0.2s; 628 | } 629 | 630 | .scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_outer { 631 | left: auto; 632 | right: 0; 633 | top: 2px; 634 | 635 | -webkit-transition: width 0.2s; 636 | -moz-transition: width 0.2s; 637 | -o-transition: width 0.2s; 638 | -ms-transition: width 0.2s; 639 | transition: width 0.2s; 640 | } 641 | 642 | .scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_size { left: -4px; } 643 | .scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_size { top: -4px; } 644 | 645 | 646 | /* update scrollbar offset if both scrolls are visible */ 647 | 648 | .scrollbar-dynamic > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; } 649 | .scrollbar-dynamic > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; } 650 | 651 | 652 | /* hover & drag */ 653 | 654 | .scrollbar-dynamic > .scroll-element:hover .scroll-element_outer, 655 | .scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer { 656 | overflow: hidden; 657 | 658 | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 659 | filter: alpha(opacity=70); 660 | opacity: 0.7; 661 | } 662 | .scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-element_size, 663 | .scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-element_size { 664 | opacity: 1; 665 | } 666 | .scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-bar, 667 | .scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-bar { 668 | height: 100%; 669 | width: 100%; 670 | 671 | -webkit-border-radius: 12px; 672 | -moz-border-radius: 12px; 673 | border-radius: 12px; 674 | } 675 | 676 | .scrollbar-dynamic > .scroll-element.scroll-x:hover .scroll-element_outer, 677 | .scrollbar-dynamic > .scroll-element.scroll-x.scroll-draggable .scroll-element_outer { 678 | height: 20px; 679 | min-height: 7px; 680 | } 681 | .scrollbar-dynamic > .scroll-element.scroll-y:hover .scroll-element_outer, 682 | .scrollbar-dynamic > .scroll-element.scroll-y.scroll-draggable .scroll-element_outer { 683 | min-width: 7px; 684 | width: 20px; 685 | } 686 | 687 | 688 | 689 | 690 | 691 | 692 | 693 | 694 | 695 | 696 | /*************** SCROLLBAR GOOGLE CHROME ***************/ 697 | 698 | .scrollbar-chrome > .scroll-element, 699 | .scrollbar-chrome > .scroll-element div 700 | { 701 | border: none; 702 | margin: 0; 703 | overflow: hidden; 704 | padding: 0; 705 | position: absolute; 706 | z-index: 10; 707 | } 708 | 709 | .scrollbar-chrome > .scroll-element { 710 | background-color: #ffffff; 711 | } 712 | 713 | .scrollbar-chrome > .scroll-element div { 714 | display: block; 715 | height: 100%; 716 | left: 0; 717 | top: 0; 718 | width: 100%; 719 | } 720 | 721 | .scrollbar-chrome > .scroll-element .scroll-element_outer {} 722 | 723 | .scrollbar-chrome > .scroll-element .scroll-element_track { 724 | background: #f1f1f1; 725 | border: 1px solid #dbdbdb; 726 | } 727 | 728 | .scrollbar-chrome > .scroll-element.scroll-x { 729 | bottom: 0; 730 | height: 16px; 731 | left: 0; 732 | min-width: 100%; 733 | width: 100%; 734 | } 735 | 736 | .scrollbar-chrome > .scroll-element.scroll-y { 737 | height: 100%; 738 | min-height: 100%; 739 | right: 0; 740 | top: 0; 741 | width: 16px; 742 | } 743 | 744 | .scrollbar-chrome > .scroll-element .scroll-bar { 745 | background-color: #d9d9d9; 746 | border: 1px solid #bdbdbd; 747 | cursor: default; 748 | 749 | -webkit-border-radius: 2px; 750 | -moz-border-radius: 2px; 751 | border-radius: 2px; 752 | } 753 | 754 | .scrollbar-chrome > .scroll-element .scroll-bar:hover { 755 | background-color: #c2c2c2; 756 | border-color: #a9a9a9; 757 | } 758 | 759 | .scrollbar-chrome > .scroll-element.scroll-draggable .scroll-bar { 760 | background-color: #919191; 761 | border-color: #7e7e7e; 762 | } 763 | 764 | /* scrollbar height/width & offset from container borders */ 765 | 766 | .scrollbar-chrome > .scroll-content.scroll-scrolly_visible { left: -16px; margin-left: 16px; } 767 | .scrollbar-chrome > .scroll-content.scroll-scrollx_visible { top: -16px; margin-top: 16px; } 768 | 769 | .scrollbar-chrome > .scroll-element.scroll-x .scroll-bar { height: 8px; min-width: 10px; top: 3px; } 770 | .scrollbar-chrome > .scroll-element.scroll-y .scroll-bar { left: 3px; min-height: 10px; width: 8px; } 771 | 772 | .scrollbar-chrome > .scroll-element.scroll-x .scroll-element_outer { border-left: 1px solid #dbdbdb; } 773 | .scrollbar-chrome > .scroll-element.scroll-x .scroll-element_track { height: 14px; left: -3px; } 774 | .scrollbar-chrome > .scroll-element.scroll-x .scroll-element_size { height: 14px; left: -4px; } 775 | 776 | .scrollbar-chrome > .scroll-element.scroll-y .scroll-element_outer { border-top: 1px solid #dbdbdb; } 777 | .scrollbar-chrome > .scroll-element.scroll-y .scroll-element_track { top: -3px; width: 14px; } 778 | .scrollbar-chrome > .scroll-element.scroll-y .scroll-element_size { top: -4px; width: 14px; } 779 | 780 | /* update scrollbar offset if both scrolls are visible */ 781 | 782 | .scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; } 783 | .scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; } 784 | 785 | .scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; } 786 | .scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; } 787 | 788 | 789 | 790 | 791 | 792 | 793 | 794 | -------------------------------------------------------------------------------- /sass/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery.scrollbar", 3 | "version": "0.2.11", 4 | "devDependencies": { 5 | "grunt": "~0.4.1", 6 | "grunt-contrib-compass": "^1.0.4", 7 | "grunt-contrib-watch": "~0.6.1" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /scrollbar.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scrollbar", 3 | "title": "jQuery Scrollbar", 4 | "description": "Cross-browser CSS customizable scrollbar with advanced features: standard scroll behavior in all browsers/devices, responsive design support (no fixed height or width required), horizontal/vertical scrollbar or both, external scrollbars, automatically hide/show scrollbars (if content/container size is changed) and more...", 5 | "keywords": [ 6 | "scroll", 7 | "scrollbar" 8 | ], 9 | "version": "0.2.11", 10 | "author": { 11 | "name": "Yuriy Khabarov", 12 | "email": "13real008@gmail.com" 13 | }, 14 | "licenses": [ 15 | { 16 | "type": "MIT", 17 | "url": "https://github.com/gromo/jquery.scrollbar/blob/master/license-mit.txt" 18 | }, 19 | { 20 | "type": "GPLv2", 21 | "url": "https://github.com/gromo/jquery.scrollbar/blob/master/license-gpl.txt" 22 | } 23 | ], 24 | "homepage": "http://gromo.github.io/jquery.scrollbar/", 25 | "download": "http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.zip", 26 | "demo": "http://gromo.github.io/jquery.scrollbar/demo/basic.html", 27 | "dependencies": { 28 | "jquery": ">=1.7" 29 | } 30 | } 31 | --------------------------------------------------------------------------------

v0.2.11 (20160803)

v0.2.10 (20151216)

v0.2.9 (20151022)

v0.2.8 (20150723)

v0.2.7 (20150122)

v0.2.6 (20141124)

v0.2.5 (20141119)

v0.2.4 (20140715)

v0.2.3 (20140703)

v0.2.2 (20140411)

v0.2.1 (20140323)

v0.2.0 (20140312)

v0.1.9 (20140310)

v0.1.8 (20140308)

v0.1.7 (20140307)

v0.1.4 (20130430)

v0.1.3 (20130423)

v0.1.2 (20130422)

v0.0.2 (20130413)

jQuery Scrollbar

Basic Scrollbars Demo

Advanced Scrollbars Demo

jQuery Scrollbar as Angular.JS directive

Documentation

Changelog

Download