').addClass('scroll-wrapper').addClass(c.attr('class'))
- .css('position', c.css('position') == 'absolute' ? 'absolute' : 'relative')
- .insertBefore(c).append(c);
+ .css('position', c.css('position') === 'absolute' ? 'absolute' : 'relative')
+ .insertBefore(c).append(c);
- if(c.is('textarea')){
+ if (o.isRtl) {
+ w.addClass('scroll--rtl');
+ }
+
+ if (c.is('textarea')) {
this.containerWrapper = cw = $('
').insertBefore(c).append(c);
w.addClass('scroll-textarea');
}
- cw.addClass("scroll-content").css({
- "height":"",
- "margin-bottom": browser.scroll.height * -1 + px,
- "margin-right": browser.scroll.width * -1 + px
- });
-
- c.on("scroll.scrollbar", function(event){
- if($.isFunction(o.onScroll)){
+ cssOptions = {
+ "height": "auto",
+ "margin-bottom": browser.scroll.height * -1 + 'px',
+ "max-height": ""
+ };
+ cssOptions[o.isRtl ? 'margin-left' : 'margin-right'] = browser.scroll.width * -1 + 'px';
+
+ cw.addClass('scroll-content').css(cssOptions);
+
+ c.on('scroll' + namespace, function (event) {
+ var scrollLeft = c.scrollLeft();
+ var scrollTop = c.scrollTop();
+ if (o.isRtl) {
+ // webkit 0:100
+ // ie/edge 100:0
+ // firefox -100:0
+ switch (true) {
+ case browser.firefox:
+ scrollLeft = Math.abs(scrollLeft);
+ case browser.msedge || browser.msie:
+ scrollLeft = c[0].scrollWidth - c[0].clientWidth - scrollLeft;
+ break;
+ }
+ }
+ if ($.isFunction(o.onScroll)) {
o.onScroll.call(S, {
- "maxScroll": s.y.maxScrollOffset,
- "scroll": c.scrollTop(),
- "size": s.y.size,
- "visible": s.y.visible
+ maxScroll: s.y.maxScrollOffset,
+ scroll: scrollTop,
+ size: s.y.size,
+ visible: s.y.visible
}, {
- "maxScroll": s.x.maxScrollOffset,
- "scroll": c.scrollLeft(),
- "size": s.x.size,
- "visible": s.x.visible
+ maxScroll: s.x.maxScrollOffset,
+ scroll: scrollLeft,
+ size: s.x.size,
+ visible: s.x.visible
});
}
- s.x.isVisible && s.x.scroller.css("left", c.scrollLeft() * s.x.kx + px);
- s.y.isVisible && s.y.scroller.css("top", c.scrollTop() * s.y.kx + px);
+ s.x.isVisible && s.x.scroll.bar.css('left', scrollLeft * s.x.kx + 'px');
+ s.y.isVisible && s.y.scroll.bar.css('top', scrollTop * s.y.kx + 'px');
});
/* prevent native scrollbars to be visible on #anchor click */
- w.on("scroll", function(){
+ w.on('scroll' + namespace, function () {
w.scrollTop(0).scrollLeft(0);
});
- if(o.disableBodyScroll){
- var handleMouseScroll = function(event){
+ if (o.disableBodyScroll) {
+ var handleMouseScroll = function (event) {
isVerticalScroll(event) ?
- s.y.isVisible && s.y.mousewheel(event) :
- s.x.isVisible && s.x.mousewheel(event);
+ s.y.isVisible && s.y.mousewheel(event) :
+ s.x.isVisible && s.x.mousewheel(event);
};
- w.on({
- "MozMousePixelScroll.scrollbar": handleMouseScroll,
- "mousewheel.scrollbar": handleMouseScroll
- });
+ w.on('MozMousePixelScroll' + namespace, handleMouseScroll);
+ w.on('mousewheel' + namespace, handleMouseScroll);
- if(browser.mobile){
- w.on("touchstart.scrollbar", function(event){
+ if (browser.mobile) {
+ w.on('touchstart' + namespace, function (event) {
var touch = event.originalEvent.touches && event.originalEvent.touches[0] || event;
var originalTouch = {
- "pageX": touch.pageX,
- "pageY": touch.pageY
+ pageX: touch.pageX,
+ pageY: touch.pageY
};
var originalScroll = {
- "left": c.scrollLeft(),
- "top": c.scrollTop()
+ left: c.scrollLeft(),
+ top: c.scrollTop()
};
- $(doc).on({
- "touchmove.scrollbar": function(event){
- var touch = event.originalEvent.targetTouches && event.originalEvent.targetTouches[0] || event;
- c.scrollLeft(originalScroll.left + originalTouch.pageX - touch.pageX);
- c.scrollTop(originalScroll.top + originalTouch.pageY - touch.pageY);
- event.preventDefault();
- },
- "touchend.scrollbar": function(){
- $(doc).off(".scrollbar");
- }
+ $(document).on('touchmove' + namespace, function (event) {
+ var touch = event.originalEvent.targetTouches && event.originalEvent.targetTouches[0] || event;
+ c.scrollLeft(originalScroll.left + originalTouch.pageX - touch.pageX);
+ c.scrollTop(originalScroll.top + originalTouch.pageY - touch.pageY);
+ event.preventDefault();
+ });
+ $(document).on('touchend' + namespace, function () {
+ $(document).off(namespace);
});
});
}
}
- if($.isFunction(o.onInit))
+ if ($.isFunction(o.onInit)) {
o.onInit.apply(this, [c]);
+ }
} else {
- cw.css({
- "height":"",
- "margin-bottom": browser.scroll.height * -1 + px,
- "margin-right": browser.scroll.width * -1 + px
- });
+ cssOptions = {
+ "height": "auto",
+ "margin-bottom": browser.scroll.height * -1 + 'px',
+ "max-height": ""
+ };
+ cssOptions[o.isRtl ? 'margin-left' : 'margin-right'] = browser.scroll.width * -1 + 'px';
+ cw.css(cssOptions);
}
// init scrollbars & recalculate sizes
- $.each(s, function(d, scrollx){
+ $.each(s, function (d, scrollx) {
var scrollCallback = null;
var scrollForward = 1;
- var scrollOffset = (d == "x") ? "scrollLeft" : "scrollTop";
+ var scrollOffset = (d === 'x') ? 'scrollLeft' : 'scrollTop';
var scrollStep = o.scrollStep;
- var scrollTo = function(){
+ var scrollTo = function () {
var currentOffset = c[scrollOffset]();
c[scrollOffset](currentOffset + scrollStep);
- if(scrollForward == 1 && (currentOffset + scrollStep) >= scrollToValue)
+ if (scrollForward == 1 && (currentOffset + scrollStep) >= scrollToValue)
currentOffset = c[scrollOffset]();
- if(scrollForward == -1 && (currentOffset + scrollStep) <= scrollToValue)
+ if (scrollForward == -1 && (currentOffset + scrollStep) <= scrollToValue)
currentOffset = c[scrollOffset]();
- if(c[scrollOffset]() == currentOffset && scrollCallback){
+ if (c[scrollOffset]() == currentOffset && scrollCallback) {
scrollCallback();
}
}
var scrollToValue = 0;
- if(!scrollx.scrollbar){
+ if (!scrollx.scroll) {
- scrollx.scrollbar = S.getScrollbar(d);
- scrollx.scroller = scrollx.scrollbar.find(".scroll-bar");
+ scrollx.scroll = S._getScroll(o['scroll' + d]).addClass('scroll-' + d);
+
+ if (o.showArrows) {
+ scrollx.scroll.addClass('scroll-element_arrows_visible');
+ }
- scrollx.mousewheel = function(event){
+ scrollx.mousewheel = function (event) {
- if(!scrollx.isVisible || (d == 'x' && isVerticalScroll(event))){
+ if (!scrollx.isVisible || (d === 'x' && isVerticalScroll(event))) {
return true;
}
- if(d == 'y' && !isVerticalScroll(event)){
+ if (d === 'y' && !isVerticalScroll(event)) {
s.x.mousewheel(event);
return true;
}
@@ -339,18 +318,27 @@
var delta = event.originalEvent.wheelDelta * -1 || event.originalEvent.detail;
var maxScrollValue = scrollx.size - scrollx.visible - scrollx.offset;
- if(!((scrollToValue <= 0 && delta < 0) || (scrollToValue >= maxScrollValue && delta > 0))){
+ // fix new mozilla
+ if (!delta) {
+ if (d === 'x' && !!event.originalEvent.deltaX) {
+ delta = event.originalEvent.deltaX * 40;
+ } else if (d === 'y' && !!event.originalEvent.deltaY) {
+ delta = event.originalEvent.deltaY * 40;
+ }
+ }
+
+ if ((delta > 0 && scrollToValue < maxScrollValue) || (delta < 0 && scrollToValue > 0)) {
scrollToValue = scrollToValue + delta;
- if(scrollToValue < 0)
+ if (scrollToValue < 0)
scrollToValue = 0;
- if(scrollToValue > maxScrollValue)
+ if (scrollToValue > maxScrollValue)
scrollToValue = maxScrollValue;
S.scrollTo = S.scrollTo || {};
S.scrollTo[scrollOffset] = scrollToValue;
- setTimeout(function(){
- if(S.scrollTo){
- c.stop().animate(S.scrollTo, 240, 'linear', function(){
+ setTimeout(function () {
+ if (S.scrollTo) {
+ c.stop().animate(S.scrollTo, 240, 'linear', function () {
scrollToValue = c[scrollOffset]();
});
S.scrollTo = null;
@@ -362,89 +350,101 @@
return false;
};
- scrollx.scrollbar.on({
- "MozMousePixelScroll.scrollbar": scrollx.mousewheel,
- "mousewheel.scrollbar": scrollx.mousewheel,
- "mouseenter.scrollbar": function(){
+ scrollx.scroll
+ .on('MozMousePixelScroll' + namespace, scrollx.mousewheel)
+ .on('mousewheel' + namespace, scrollx.mousewheel)
+ .on('mouseenter' + namespace, function () {
scrollToValue = c[scrollOffset]();
- }
- });
+ });
// handle arrows & scroll inner mousedown event
- scrollx.scrollbar.find(".scroll-arrow, .scroll-element_track")
- .on("mousedown.scrollbar", function(event){
+ scrollx.scroll.find('.scroll-arrow, .scroll-element_track')
+ .on('mousedown' + namespace, function (event) {
- if(event.which != lmb)
- return true;
-
- scrollForward = 1;
-
- var data = {
- "eventOffset": event[(d == "x") ? "pageX" : "pageY"],
- "maxScrollValue": scrollx.size - scrollx.visible - scrollx.offset,
- "scrollbarOffset": scrollx.scroller.offset()[(d == "x") ? "left" : "top"],
- "scrollbarSize": scrollx.scroller[(d == "x") ? "outerWidth" : "outerHeight"]()
- };
- var timeout = 0, timer = 0;
-
- if($(this).hasClass('scroll-arrow')){
- scrollForward = $(this).hasClass("scroll-arrow_more") ? 1 : -1;
- scrollStep = o.scrollStep * scrollForward;
- scrollToValue = scrollForward > 0 ? data.maxScrollValue : 0;
- } else {
- scrollForward = (data.eventOffset > (data.scrollbarOffset + data.scrollbarSize) ? 1
- : (data.eventOffset < data.scrollbarOffset ? -1 : 0));
- scrollStep = Math.round(scrollx.visible * 0.75) * scrollForward;
- scrollToValue = (data.eventOffset - data.scrollbarOffset -
- (o.stepScrolling ? (scrollForward == 1 ? data.scrollbarSize : 0)
- : Math.round(data.scrollbarSize / 2)));
- scrollToValue = c[scrollOffset]() + (scrollToValue / scrollx.kx);
- }
+ if (event.which != 1) // lmb
+ return true;
- S.scrollTo = S.scrollTo || {};
- S.scrollTo[scrollOffset] = o.stepScrolling ? c[scrollOffset]() + scrollStep : scrollToValue;
+ scrollForward = 1;
- if(o.stepScrolling){
- scrollCallback = function(){
- scrollToValue = c[scrollOffset]();
- clearInterval(timer);
- clearTimeout(timeout);
- timeout = 0;
- timer = 0;
+ var data = {
+ eventOffset: event[(d === 'x') ? 'pageX' : 'pageY'],
+ maxScrollValue: scrollx.size - scrollx.visible - scrollx.offset,
+ scrollbarOffset: scrollx.scroll.bar.offset()[(d === 'x') ? 'left' : 'top'],
+ scrollbarSize: scrollx.scroll.bar[(d === 'x') ? 'outerWidth' : 'outerHeight']()
};
- timeout = setTimeout(function(){
- timer = setInterval(scrollTo, 40);
- }, o.duration + 100);
- }
+ var timeout = 0, timer = 0;
+
+ if ($(this).hasClass('scroll-arrow')) {
+ scrollForward = $(this).hasClass("scroll-arrow_more") ? 1 : -1;
+ scrollStep = o.scrollStep * scrollForward;
+ scrollToValue = scrollForward > 0 ? data.maxScrollValue : 0;
+ if (o.isRtl) {
+ switch(true){
+ case browser.firefox:
+ scrollToValue = scrollForward > 0 ? 0: data.maxScrollValue * -1;
+ break;
+ case browser.msie || browser.msedge:
+ break;
+ }
+ }
+ } else {
+ scrollForward = (data.eventOffset > (data.scrollbarOffset + data.scrollbarSize) ? 1
+ : (data.eventOffset < data.scrollbarOffset ? -1 : 0));
+ if(d === 'x' && o.isRtl && (browser.msie || browser.msedge))
+ scrollForward = scrollForward * -1;
+ scrollStep = Math.round(scrollx.visible * 0.75) * scrollForward;
+ scrollToValue = (data.eventOffset - data.scrollbarOffset -
+ (o.stepScrolling ? (scrollForward == 1 ? data.scrollbarSize : 0)
+ : Math.round(data.scrollbarSize / 2)));
+ scrollToValue = c[scrollOffset]() + (scrollToValue / scrollx.kx);
+ }
- setTimeout(function(){
- if(S.scrollTo){
- c.animate(S.scrollTo, o.duration);
- S.scrollTo = null;
+ S.scrollTo = S.scrollTo || {};
+ S.scrollTo[scrollOffset] = o.stepScrolling ? c[scrollOffset]() + scrollStep : scrollToValue;
+
+ if (o.stepScrolling) {
+ scrollCallback = function () {
+ scrollToValue = c[scrollOffset]();
+ clearInterval(timer);
+ clearTimeout(timeout);
+ timeout = 0;
+ timer = 0;
+ };
+ timeout = setTimeout(function () {
+ timer = setInterval(scrollTo, 40);
+ }, o.duration + 100);
}
- }, 1);
- return handleMouseDown(scrollCallback, event);
- });
+ setTimeout(function () {
+ if (S.scrollTo) {
+ c.animate(S.scrollTo, o.duration);
+ S.scrollTo = null;
+ }
+ }, 1);
+
+ return S._handleMouseDown(scrollCallback, event);
+ });
// handle scrollbar drag'n'drop
- scrollx.scroller.on("mousedown.scrollbar", function(event){
+ scrollx.scroll.bar.on('mousedown' + namespace, function (event) {
- if(event.which != lmb)
+ if (event.which != 1) // lmb
return true;
- var eventPosition = event[(d == "x")? "pageX" : "pageY"];
+ var eventPosition = event[(d === 'x') ? 'pageX' : 'pageY'];
var initOffset = c[scrollOffset]();
- scrollx.scrollbar.addClass("scroll-draggable");
+ scrollx.scroll.addClass('scroll-draggable');
- $(doc).on("mousemove.scrollbar", function(event){
- var diff = parseInt((event[(d == "x")? "pageX" : "pageY"] - eventPosition) / scrollx.kx, 10);
+ $(document).on('mousemove' + namespace, function (event) {
+ var diff = parseInt((event[(d === 'x') ? 'pageX' : 'pageY'] - eventPosition) / scrollx.kx, 10);
+ if (d === 'x' && o.isRtl && (browser.msie || browser.msedge))
+ diff = diff * -1;
c[scrollOffset](initOffset + diff);
});
- return handleMouseDown(function(){
- scrollx.scrollbar.removeClass("scroll-draggable");
+ return S._handleMouseDown(function () {
+ scrollx.scroll.removeClass('scroll-draggable');
scrollToValue = c[scrollOffset]();
}, event);
});
@@ -452,155 +452,235 @@
});
// remove classes & reset applied styles
- $.each(s, function(d, scrollx){
- var scrollClass = "scroll-scroll" + d + "_visible";
+ $.each(s, function (d, scrollx) {
+ var scrollClass = 'scroll-scroll' + d + '_visible';
var scrolly = (d == "x") ? s.y : s.x;
- scrollx.scrollbar.removeClass(scrollClass);
- scrolly.scrollbar.removeClass(scrollClass);
+ scrollx.scroll.removeClass(scrollClass);
+ scrolly.scroll.removeClass(scrollClass);
cw.removeClass(scrollClass);
});
// calculate init sizes
- $.each(s, function(d, scrollx){
+ $.each(s, function (d, scrollx) {
$.extend(scrollx, (d == "x") ? {
- "offset": parseInt(c.css("left"), 10) || 0,
- "size": c.prop("scrollWidth"),
- "visible": w.width()
+ offset: parseInt(c.css('left'), 10) || 0,
+ size: c.prop('scrollWidth'),
+ visible: w.width()
} : {
- "offset": parseInt(c.css("top"), 10) || 0,
- "size": c.prop("scrollHeight"),
- "visible": w.height()
+ offset: parseInt(c.css('top'), 10) || 0,
+ size: c.prop('scrollHeight'),
+ visible: w.height()
});
});
+ // update scrollbar visibility/dimensions
+ this._updateScroll('x', this.scrollx);
+ this._updateScroll('y', this.scrolly);
- var updateScroll = function(d, scrollx){
-
- var scrollClass = "scroll-scroll" + d + "_visible";
- var scrolly = (d == "x") ? s.y : s.x;
- var offset = parseInt(c.css((d == "x") ? "left" : "top"), 10) || 0;
-
- var AreaSize = scrollx.size;
- var AreaVisible = scrollx.visible + offset;
-
- scrollx.isVisible = (AreaSize - AreaVisible) > 1; // bug in IE9/11 with 1px diff
- if(scrollx.isVisible){
- scrollx.scrollbar.addClass(scrollClass);
- scrolly.scrollbar.addClass(scrollClass);
- cw.addClass(scrollClass);
- } else {
- scrollx.scrollbar.removeClass(scrollClass);
- scrolly.scrollbar.removeClass(scrollClass);
- cw.removeClass(scrollClass);
- }
-
- if(d == "y" && (scrollx.isVisible || scrollx.size < scrollx.visible)){
- cw.css("height", (AreaVisible + browser.scroll.height) + px);
- }
-
- if(s.x.size != c.prop("scrollWidth")
- || s.y.size != c.prop("scrollHeight")
- || s.x.visible != w.width()
- || s.y.visible != w.height()
- || s.x.offset != (parseInt(c.css("left"), 10) || 0)
- || s.y.offset != (parseInt(c.css("top"), 10) || 0)
- ){
- $.each(s, function(d, scrollx){
- $.extend(scrollx, (d == "x") ? {
- "offset": parseInt(c.css("left"), 10) || 0,
- "size": c.prop("scrollWidth"),
- "visible": w.width()
- } : {
- "offset": parseInt(c.css("top"), 10) || 0,
- "size": c.prop("scrollHeight"),
- "visible": w.height()
- });
- });
- updateScroll(d == "x" ? "y" : "x", scrolly);
- }
- };
- $.each(s, updateScroll);
-
- if($.isFunction(o.onUpdate))
+ if ($.isFunction(o.onUpdate)) {
o.onUpdate.apply(this, [c]);
+ }
// calculate scroll size
- $.each(s, function(d, scrollx){
+ $.each(s, function (d, scrollx) {
- var cssOffset = (d == "x") ? "left" : "top";
- var cssFullSize = (d == "x") ? "outerWidth" : "outerHeight";
- var cssSize = (d == "x") ? "width" : "height";
+ var cssOffset = (d === 'x') ? 'left' : 'top';
+ var cssFullSize = (d === 'x') ? 'outerWidth' : 'outerHeight';
+ var cssSize = (d === 'x') ? 'width' : 'height';
var offset = parseInt(c.css(cssOffset), 10) || 0;
var AreaSize = scrollx.size;
var AreaVisible = scrollx.visible + offset;
- var scrollSize = scrollx.scrollbar.find(".scroll-element_size");
- scrollSize = scrollSize[cssFullSize]() + (parseInt(scrollSize.css(cssOffset), 10) || 0);
+ var scrollSize = scrollx.scroll.size[cssFullSize]() + (parseInt(scrollx.scroll.size.css(cssOffset), 10) || 0);
- if(o.autoScrollSize){
+ if (o.autoScrollSize) {
scrollx.scrollbarSize = parseInt(scrollSize * AreaVisible / AreaSize, 10);
- scrollx.scroller.css(cssSize, scrollx.scrollbarSize + px);
+ scrollx.scroll.bar.css(cssSize, scrollx.scrollbarSize + 'px');
}
- scrollx.scrollbarSize = scrollx.scroller[cssFullSize]();
+ scrollx.scrollbarSize = scrollx.scroll.bar[cssFullSize]();
scrollx.kx = ((scrollSize - scrollx.scrollbarSize) / (AreaSize - AreaVisible)) || 1;
scrollx.maxScrollOffset = AreaSize - AreaVisible;
});
- c.scrollLeft(initScroll.scrollLeft).scrollTop(initScroll.scrollTop).trigger("scroll");
- }
- };
-
- /*
- * Extend jQuery as plugin
- *
- * @param {object|string} options or command to execute
- * @param {object|array} args additional arguments as array []
- */
- $.fn.scrollbar = function(options, args){
-
- var toReturn = this;
-
- if(options === "get")
- toReturn = null;
+ c.scrollLeft(initScroll.scrollLeft).scrollTop(initScroll.scrollTop).trigger('scroll');
+ },
+ /**
+ * Get scrollx/scrolly object
+ *
+ * @param {Mixed} scroll
+ * @returns {jQuery} scroll object
+ */
+ _getScroll: function (scroll) {
+ var types = {
+ advanced: [
+ '
'
+ ].join(''),
+ simple: [
+ '
'
+ ].join('')
+ };
+ if (types[scroll]) {
+ scroll = types[scroll];
+ }
+ if (!scroll) {
+ scroll = types['simple'];
+ }
+ if (typeof (scroll) == 'string') {
+ scroll = $(scroll).appendTo(this.wrapper);
+ } else {
+ scroll = $(scroll);
+ }
+ $.extend(scroll, {
+ bar: scroll.find('.scroll-bar'),
+ size: scroll.find('.scroll-element_size'),
+ track: scroll.find('.scroll-element_track')
+ });
+ return scroll;
+ },
+ _handleMouseDown: function (callback, event) {
- this.each(function() {
+ var namespace = this.namespace;
- var container = $(this);
+ $(document).on('blur' + namespace, function () {
+ $(document).add('body').off(namespace);
+ callback && callback();
+ });
+ $(document).on('dragstart' + namespace, function (event) {
+ event.preventDefault();
+ return false;
+ });
+ $(document).on('mouseup' + namespace, function () {
+ $(document).add('body').off(namespace);
+ callback && callback();
+ });
+ $('body').on('selectstart' + namespace, function (event) {
+ event.preventDefault();
+ return false;
+ });
- if(container.hasClass("scroll-wrapper")
- || container.get(0).nodeName == "body"){
- return true;
+ event && event.preventDefault();
+ return false;
+ },
+ _updateScroll: function (d, scrollx) {
+
+ var container = this.container,
+ containerWrapper = this.containerWrapper || container,
+ scrollClass = 'scroll-scroll' + d + '_visible',
+ scrolly = (d === 'x') ? this.scrolly : this.scrollx,
+ offset = parseInt(this.container.css((d === 'x') ? 'left' : 'top'), 10) || 0,
+ wrapper = this.wrapper;
+
+ var AreaSize = scrollx.size;
+ var AreaVisible = scrollx.visible + offset;
+
+ scrollx.isVisible = (AreaSize - AreaVisible) > 1; // bug in IE9/11 with 1px diff
+ if (scrollx.isVisible) {
+ scrollx.scroll.addClass(scrollClass);
+ scrolly.scroll.addClass(scrollClass);
+ containerWrapper.addClass(scrollClass);
+ } else {
+ scrollx.scroll.removeClass(scrollClass);
+ scrolly.scroll.removeClass(scrollClass);
+ containerWrapper.removeClass(scrollClass);
}
- var instance = container.data("scrollbar");
- if(instance){
- if(options === "get"){
- toReturn = instance;
- return false;
+ if (d === 'y') {
+ if (container.is('textarea') || AreaSize < AreaVisible) {
+ containerWrapper.css({
+ "height": (AreaVisible + browser.scroll.height) + 'px',
+ "max-height": "none"
+ });
+ } else {
+ containerWrapper.css({
+ //"height": "auto", // do not reset height value: issue with height:100%!
+ "max-height": (AreaVisible + browser.scroll.height) + 'px'
+ });
}
+ }
- var func = (typeof options == "string" && instance[options]) ? options : "init";
- instance[func].apply(instance, $.isArray(args) ? args : []);
+ if (scrollx.size != container.prop('scrollWidth')
+ || scrolly.size != container.prop('scrollHeight')
+ || scrollx.visible != wrapper.width()
+ || scrolly.visible != wrapper.height()
+ || scrollx.offset != (parseInt(container.css('left'), 10) || 0)
+ || scrolly.offset != (parseInt(container.css('top'), 10) || 0)
+ ) {
+ $.extend(this.scrollx, {
+ offset: parseInt(container.css('left'), 10) || 0,
+ size: container.prop('scrollWidth'),
+ visible: wrapper.width()
+ });
+ $.extend(this.scrolly, {
+ offset: parseInt(container.css('top'), 10) || 0,
+ size: this.container.prop('scrollHeight'),
+ visible: wrapper.height()
+ });
+ this._updateScroll(d === 'x' ? 'y' : 'x', scrolly);
+ }
+ }
+ };
+
+ var CustomScrollbar = BaseScrollbar;
- if(options === "destroy"){
- container.removeData("scrollbar");
- while($.inArray(instance, browser.scrolls) >= 0)
- browser.scrolls.splice($.inArray(instance, browser.scrolls), 1);
+ /*
+ * Extend jQuery as plugin
+ *
+ * @param {Mixed} command to execute
+ * @param {Mixed} arguments as Array
+ * @return {jQuery}
+ */
+ $.fn.scrollbar = function (command, args) {
+ if (typeof command !== 'string') {
+ args = command;
+ command = 'init';
+ }
+ if (typeof args === 'undefined') {
+ args = [];
+ }
+ if (!$.isArray(args)) {
+ args = [args];
+ }
+ this.not('body, .scroll-wrapper').each(function () {
+ var element = $(this),
+ instance = element.data(browser.data.name);
+ if (instance || command === 'init') {
+ if (!instance) {
+ instance = new CustomScrollbar(element);
}
- } else {
- if(typeof options != "string"){
- instance = new customScrollbar(container, options);
- container.data("scrollbar", instance);
- browser.scrolls.push(instance);
+ if (instance[command]) {
+ instance[command].apply(instance, args);
}
}
- return true;
});
-
- return toReturn;
+ return this;
};
/**
@@ -608,70 +688,48 @@
*/
$.fn.scrollbar.options = defaults;
- /**
- * Extend AngularJS as UI directive
- *
- *
- */
- if(win.angular){
- (function(angular){
- var app = angular.module('jQueryScrollbar', []);
- app.directive('jqueryScrollbar', function(){
- return {
- "link": function(scope, element){
- element.scrollbar(scope.options).on('$destroy', function(){
- element.scrollbar('destroy');
- });
- },
- "restring": "AC",
- "scope": {
- "options": "=jqueryScrollbar"
- }
- };
- });
- })(win.angular);
- }
/**
* Check if scroll content/container size is changed
*/
- var timer = 0, timerCounter = 0;
- var updateScrollbars = function(force){
- var i, c, o, s, w, x, y;
- for( i = 0; i < browser.scrolls.length; i++){
- s = browser.scrolls[i];
- c = s.container;
- o = s.options;
- w = s.wrapper;
- x = s.scrollx;
- y = s.scrolly;
- if(force || (o.autoUpdate && w && w.is(":visible") &&
- (c.prop("scrollWidth") != x.size
- || c.prop("scrollHeight") != y.size
- || w.width() != x.visible
- || w.height() != y.visible
- ))){
- s.init();
-
- if(debug){
- browser.log({
- "scrollHeight": c.prop("scrollHeight") + ":" + s.scrolly.size,
- "scrollWidth": c.prop("scrollWidth") + ":" + s.scrollx.size,
- "visibleHeight": w.height() + ":" + s.scrolly.visible,
- "visibleWidth": w.width() + ":" + s.scrollx.visible
- }, true);
- timerCounter++;
+
+ var updateScrollbars = (function () {
+ var timer = 0,
+ timerCounter = 0;
+
+ return function (force) {
+ var i, container, options, scroll, wrapper, scrollx, scrolly;
+ for (i = 0; i < browser.scrolls.length; i++) {
+ scroll = browser.scrolls[i];
+ container = scroll.container;
+ options = scroll.options;
+ wrapper = scroll.wrapper;
+ scrollx = scroll.scrollx;
+ scrolly = scroll.scrolly;
+ if (force || (options.autoUpdate && wrapper && wrapper.is(':visible') &&
+ (container.prop('scrollWidth') != scrollx.size || container.prop('scrollHeight') != scrolly.size || wrapper.width() != scrollx.visible || wrapper.height() != scrolly.visible))) {
+ scroll.init();
+
+ if (options.debug) {
+ window.console && console.log({
+ scrollHeight: container.prop('scrollHeight') + ':' + scroll.scrolly.size,
+ scrollWidth: container.prop('scrollWidth') + ':' + scroll.scrollx.size,
+ visibleHeight: wrapper.height() + ':' + scroll.scrolly.visible,
+ visibleWidth: wrapper.width() + ':' + scroll.scrollx.visible
+ }, true);
+ timerCounter++;
+ }
}
}
- }
- if(debug && timerCounter > 10){
- browser.log("Scroll updates exceed 10");
- updateScrollbars = function(){};
- } else {
- clearTimeout(timer);
- timer = setTimeout(updateScrollbars, 300);
- }
- };
+ if (debug && timerCounter > 10) {
+ window.console && console.log('Scroll updates exceed 10');
+ updateScrollbars = function () {};
+ } else {
+ clearTimeout(timer);
+ timer = setTimeout(updateScrollbars, 300);
+ }
+ };
+ })();
/* ADDITIONAL FUNCTIONS */
/**
@@ -680,77 +738,52 @@
* @param {Boolean} actual size or CSS size, default - CSS size
* @returns {Object} with height, width
*/
- function getBrowserScrollSize(actualSize){
+ function getBrowserScrollSize(actualSize) {
- if(browser.webkit && !actualSize){
+ if (browser.webkit && !actualSize) {
return {
- "height": 0,
- "width": 0
+ height: 0,
+ width: 0
};
}
- if(!browser.data.outer){
+ if (!browser.data.outer) {
var css = {
- "border": "none",
+ "border": "none",
"box-sizing": "content-box",
- "height": "200px",
- "margin": "0",
+ "height": "200px",
+ "margin": "0",
"padding": "0",
- "width": "200px"
+ "width": "200px"
};
browser.data.inner = $("
").css($.extend({}, css));
browser.data.outer = $("
").css($.extend({
- "left": "-1000px",
- "overflow": "scroll",
- "position": "absolute",
- "top": "-1000px"
+ "left": "-1000px",
+ "overflow": "scroll",
+ "position": "absolute",
+ "top": "-1000px"
}, css)).append(browser.data.inner).appendTo("body");
}
browser.data.outer.scrollLeft(1000).scrollTop(1000);
return {
- "height": Math.ceil((browser.data.outer.offset().top - browser.data.inner.offset().top) || 0),
- "width": Math.ceil((browser.data.outer.offset().left - browser.data.inner.offset().left) || 0)
+ height: Math.ceil((browser.data.outer.offset().top - browser.data.inner.offset().top) || 0),
+ width: Math.ceil((browser.data.outer.offset().left - browser.data.inner.offset().left) || 0)
};
}
- function handleMouseDown(callback, event){
- $(doc).on({
- "blur.scrollbar": function(){
- $(doc).add('body').off('.scrollbar');
- callback && callback();
- },
- "dragstart.scrollbar": function(event){
- event.preventDefault();
- return false;
- },
- "mouseup.scrollbar": function(){
- $(doc).add('body').off('.scrollbar');
- callback && callback();
- }
- });
- $("body").on({
- "selectstart.scrollbar": function(event){
- event.preventDefault();
- return false;
- }
- });
- event && event.preventDefault();
- return false;
- }
-
/**
* Check if native browser scrollbars overlay content
*
* @returns {Boolean}
*/
- function isScrollOverlaysContent(){
+ function isScrollOverlaysContent() {
var scrollSize = getBrowserScrollSize(true);
return !(scrollSize.height || scrollSize.width);
}
- function isVerticalScroll(event){
+ function isVerticalScroll(event) {
var e = event.originalEvent;
if (e.axis && e.axis === e.HORIZONTAL_AXIS)
return false;
@@ -759,4 +792,41 @@
return true;
}
-})(jQuery, document, window);
\ No newline at end of file
+
+ /**
+ * Extend AngularJS as UI directive
+ * and expose a provider for override default config
+ *
+ */
+ if (window.angular) {
+ (function (angular) {
+ angular.module('jQueryScrollbar', [])
+ .provider('jQueryScrollbar', function () {
+ var defaultOptions = defaults;
+ return {
+ setOptions: function (options) {
+ angular.extend(defaultOptions, options);
+ },
+ $get: function () {
+ return {
+ options: angular.copy(defaultOptions)
+ };
+ }
+ };
+ })
+ .directive('jqueryScrollbar', ['jQueryScrollbar', '$parse', function (jQueryScrollbar, $parse) {
+ return {
+ restrict: "AC",
+ link: function (scope, element, attrs) {
+ var model = $parse(attrs.jqueryScrollbar),
+ options = model(scope);
+ element.scrollbar(options || jQueryScrollbar.options)
+ .on('$destroy', function () {
+ element.scrollbar('destroy');
+ });
+ }
+ };
+ }]);
+ })(window.angular);
+ }
+}));
diff --git a/jquery.scrollbar.min.js b/jquery.scrollbar.min.js
index 5d1d89e..5a86f9a 100644
--- a/jquery.scrollbar.min.js
+++ b/jquery.scrollbar.min.js
@@ -1,14 +1,16 @@
/**
* jQuery CSS Customizable Scrollbar
*
- * Copyright 2014, Yuriy Khabarov
+ * Copyright 2015, Yuriy Khabarov
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* If you found bug, please contact me via email <13real008@gmail.com>
*
+ * Compressed by http://jscompress.com/
+ *
* @author Yuriy Khabarov aka Gromo
- * @version 0.2.6
+ * @version 0.2.11
* @url https://github.com/gromo/jquery.scrollbar/
*
*/
-(function(e,t,n){"use strict";function h(t){if(o.webkit&&!t){return{height:0,width:0}}if(!o.data.outer){var n={border:"none","box-sizing":"content-box",height:"200px",margin:"0",padding:"0",width:"200px"};o.data.inner=e("
").css(e.extend({},n));o.data.outer=e("
").css(e.extend({left:"-1000px",overflow:"scroll",position:"absolute",top:"-1000px"},n)).append(o.data.inner).appendTo("body")}o.data.outer.scrollLeft(1e3).scrollTop(1e3);return{height:Math.ceil(o.data.outer.offset().top-o.data.inner.offset().top||0),width:Math.ceil(o.data.outer.offset().left-o.data.inner.offset().left||0)}}function p(n,r){e(t).on({"blur.scrollbar":function(){e(t).add("body").off(".scrollbar");n&&n()},"dragstart.scrollbar":function(e){e.preventDefault();return false},"mouseup.scrollbar":function(){e(t).add("body").off(".scrollbar");n&&n()}});e("body").on({"selectstart.scrollbar":function(e){e.preventDefault();return false}});r&&r.preventDefault();return false}function d(){var e=h(true);return!(e.height||e.width)}function v(e){var t=e.originalEvent;if(t.axis&&t.axis===t.HORIZONTAL_AXIS)return false;if(t.wheelDeltaX)return false;return true}var r=false;var i=1,s="px";var o={data:{},macosx:n.navigator.platform.toLowerCase().indexOf("mac")!==-1,mobile:/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(n.navigator.userAgent),overlay:null,scroll:null,scrolls:[],webkit:/WebKit/.test(n.navigator.userAgent),log:r?function(t,r){var i=t;if(r&&typeof t!="string"){i=[];e.each(t,function(e,t){i.push('"'+e+'": '+t)});i=i.join(", ")}if(n.console&&n.console.log){n.console.log(i)}else{alert(i)}}:function(){}};var u={autoScrollSize:true,autoUpdate:true,debug:false,disableBodyScroll:false,duration:200,ignoreMobile:true,ignoreOverlay:true,scrollStep:30,showArrows:false,stepScrolling:true,type:"simple",scrollx:null,scrolly:null,onDestroy:null,onInit:null,onScroll:null,onUpdate:null};var a=function(t,r){if(!o.scroll){o.log("Init jQuery Scrollbar v0.2.6");o.overlay=d();o.scroll=h();c();e(n).resize(function(){var e=false;if(o.scroll&&(o.scroll.height||o.scroll.width)){var t=h();if(t.height!=o.scroll.height||t.width!=o.scroll.width){o.scroll=t;e=true}}c(e)})}this.container=t;this.options=e.extend({},u,n.jQueryScrollbarOptions||{});this.scrollTo=null;this.scrollx={};this.scrolly={};this.init(r)};a.prototype={destroy:function(){if(!this.wrapper){return}var n=this.container.scrollLeft();var r=this.container.scrollTop();this.container.insertBefore(this.wrapper).css({height:"",margin:""}).removeClass("scroll-content").removeClass("scroll-scrollx_visible").removeClass("scroll-scrolly_visible").off(".scrollbar").scrollLeft(n).scrollTop(r);this.scrollx.scrollbar.removeClass("scroll-scrollx_visible").find("div").andSelf().off(".scrollbar");this.scrolly.scrollbar.removeClass("scroll-scrolly_visible").find("div").andSelf().off(".scrollbar");this.wrapper.remove();e(t).add("body").off(".scrollbar");if(e.isFunction(this.options.onDestroy))this.options.onDestroy.apply(this,[this.container])},getScrollbar:function(t){var n=this.options["scroll"+t];var r={advanced:'
'+'
'+'
'+'
",simple:'
"};var i=r[this.options.type]?this.options.type:"advanced";if(n){if(typeof n=="string"){n=e(n).appendTo(this.wrapper)}else{n=e(n)}}else{n=e("
").addClass("scroll-element").html(r[i]).appendTo(this.wrapper)}if(this.options.showArrows){n.addClass("scroll-element_arrows_visible")}return n.addClass("scroll-"+t)},init:function(n){var r=this;var u=this.container;var a=this.containerWrapper||u;var f=e.extend(this.options,n||{});var l={x:this.scrollx,y:this.scrolly};var c=this.wrapper;var h={scrollLeft:u.scrollLeft(),scrollTop:u.scrollTop()};if(o.mobile&&f.ignoreMobile||o.overlay&&f.ignoreOverlay||o.macosx&&!o.webkit){return false}if(!c){this.wrapper=c=e("
").addClass("scroll-wrapper").addClass(u.attr("class")).css("position",u.css("position")=="absolute"?"absolute":"relative").insertBefore(u).append(u);if(u.is("textarea")){this.containerWrapper=a=e("
").insertBefore(u).append(u);c.addClass("scroll-textarea")}a.addClass("scroll-content").css({height:"","margin-bottom":o.scroll.height*-1+s,"margin-right":o.scroll.width*-1+s});u.on("scroll.scrollbar",function(t){if(e.isFunction(f.onScroll)){f.onScroll.call(r,{maxScroll:l.y.maxScrollOffset,scroll:u.scrollTop(),size:l.y.size,visible:l.y.visible},{maxScroll:l.x.maxScrollOffset,scroll:u.scrollLeft(),size:l.x.size,visible:l.x.visible})}l.x.isVisible&&l.x.scroller.css("left",u.scrollLeft()*l.x.kx+s);l.y.isVisible&&l.y.scroller.css("top",u.scrollTop()*l.y.kx+s)});c.on("scroll",function(){c.scrollTop(0).scrollLeft(0)});if(f.disableBodyScroll){var d=function(e){v(e)?l.y.isVisible&&l.y.mousewheel(e):l.x.isVisible&&l.x.mousewheel(e)};c.on({"MozMousePixelScroll.scrollbar":d,"mousewheel.scrollbar":d});if(o.mobile){c.on("touchstart.scrollbar",function(n){var r=n.originalEvent.touches&&n.originalEvent.touches[0]||n;var i={pageX:r.pageX,pageY:r.pageY};var s={left:u.scrollLeft(),top:u.scrollTop()};e(t).on({"touchmove.scrollbar":function(e){var t=e.originalEvent.targetTouches&&e.originalEvent.targetTouches[0]||e;u.scrollLeft(s.left+i.pageX-t.pageX);u.scrollTop(s.top+i.pageY-t.pageY);e.preventDefault()},"touchend.scrollbar":function(){e(t).off(".scrollbar")}})})}}if(e.isFunction(f.onInit))f.onInit.apply(this,[u])}else{a.css({height:"","margin-bottom":o.scroll.height*-1+s,"margin-right":o.scroll.width*-1+s})}e.each(l,function(n,s){var o=null;var a=1;var c=n=="x"?"scrollLeft":"scrollTop";var h=f.scrollStep;var d=function(){var e=u[c]();u[c](e+h);if(a==1&&e+h>=m)e=u[c]();if(a==-1&&e+h<=m)e=u[c]();if(u[c]()==e&&o){o()}};var m=0;if(!s.scrollbar){s.scrollbar=r.getScrollbar(n);s.scroller=s.scrollbar.find(".scroll-bar");s.mousewheel=function(e){if(!s.isVisible||n=="x"&&v(e)){return true}if(n=="y"&&!v(e)){l.x.mousewheel(e);return true}var t=e.originalEvent.wheelDelta*-1||e.originalEvent.detail;var i=s.size-s.visible-s.offset;if(!(m<=0&&t<0||m>=i&&t>0)){m=m+t;if(m<0)m=0;if(m>i)m=i;r.scrollTo=r.scrollTo||{};r.scrollTo[c]=m;setTimeout(function(){if(r.scrollTo){u.stop().animate(r.scrollTo,240,"linear",function(){m=u[c]()});r.scrollTo=null}},1)}e.preventDefault();return false};s.scrollbar.on({"MozMousePixelScroll.scrollbar":s.mousewheel,"mousewheel.scrollbar":s.mousewheel,"mouseenter.scrollbar":function(){m=u[c]()}});s.scrollbar.find(".scroll-arrow, .scroll-element_track").on("mousedown.scrollbar",function(t){if(t.which!=i)return true;a=1;var l={eventOffset:t[n=="x"?"pageX":"pageY"],maxScrollValue:s.size-s.visible-s.offset,scrollbarOffset:s.scroller.offset()[n=="x"?"left":"top"],scrollbarSize:s.scroller[n=="x"?"outerWidth":"outerHeight"]()};var v=0,g=0;if(e(this).hasClass("scroll-arrow")){a=e(this).hasClass("scroll-arrow_more")?1:-1;h=f.scrollStep*a;m=a>0?l.maxScrollValue:0}else{a=l.eventOffset>l.scrollbarOffset+l.scrollbarSize?1:l.eventOffset
1;if(n.isVisible){n.scrollbar.addClass(r);i.scrollbar.addClass(r);a.addClass(r)}else{n.scrollbar.removeClass(r);i.scrollbar.removeClass(r);a.removeClass(r)}if(t=="y"&&(n.isVisible||n.size=0)o.scrolls.splice(e.inArray(s,o.scrolls),1)}}else{if(typeof t!="string"){s=new a(i,t);i.data("scrollbar",s);o.scrolls.push(s)}}return true});return r};e.fn.scrollbar.options=u;if(n.angular){(function(e){var t=e.module("jQueryScrollbar",[]);t.directive("jqueryScrollbar",function(){return{link:function(e,t){t.scrollbar(e.options).on("$destroy",function(){t.scrollbar("destroy")})},restring:"AC",scope:{options:"=jqueryScrollbar"}}})})(n.angular)}var f=0,l=0;var c=function(e){var t,n,i,s,u,a,h;for(t=0;t10){o.log("Scroll updates exceed 10");c=function(){}}else{clearTimeout(f);f=setTimeout(c,300)}}})(jQuery,document,window);
\ No newline at end of file
+!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&&p
<0&&p>0)&&(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")||k
10?(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)});
\ No newline at end of file
diff --git a/package.js b/package.js
index dc31481..6a5ad53 100644
--- a/package.js
+++ b/package.js
@@ -6,7 +6,7 @@ var where = 'client'; // where to install: 'client' or 'server'. For both, pass
Package.describe({
name: packageName,
- version: '0.0.1',
+ version: '0.2.11',
// Brief, one-line summary of the package.
summary: 'Cross-browser CSS customizable scrollbar with advanced features.',
// URL to the Git repository containing the source code for this package.
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..3d7ba2a
--- /dev/null
+++ b/package.json
@@ -0,0 +1,25 @@
+{
+ "name": "jquery.scrollbar",
+ "version": "0.2.11",
+ "description": "Cross-browser CSS customizable scrollbar",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/gromo/jquery.scrollbar.git"
+ },
+ "keywords": [
+ "jquery",
+ "scrollbar",
+ "angular",
+ "textarea"
+ ],
+ "author": "Yuriy Khabarov",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/gromo/jquery.scrollbar/issues"
+ },
+ "homepage": "https://github.com/gromo/jquery.scrollbar"
+}
diff --git a/sass/Gruntfile.js b/sass/Gruntfile.js
new file mode 100644
index 0000000..a983423
--- /dev/null
+++ b/sass/Gruntfile.js
@@ -0,0 +1,22 @@
+module.exports = function (grunt) {
+ grunt.initConfig({
+ pkg: grunt.file.readJSON('package.json'),
+ compass: {
+ auto: {
+ options: {
+ sassDir: './',
+ cssDir: '../'
+ }
+ }
+ },
+ watch: {
+ scss: {
+ files: ['./**/*.scss'],
+ tasks: ['compass']
+ }
+ }
+ });
+ grunt.loadNpmTasks('grunt-contrib-compass');
+ grunt.loadNpmTasks('grunt-contrib-watch');
+ grunt.registerTask('default', ['watch']);
+};
\ No newline at end of file
diff --git a/sass/config.rb b/sass/config.rb
new file mode 100644
index 0000000..eb6e6e4
--- /dev/null
+++ b/sass/config.rb
@@ -0,0 +1,2 @@
+require 'compass/import-once/activate'
+line_comments = false
diff --git a/sass/jquery.scrollbar.scss b/sass/jquery.scrollbar.scss
new file mode 100644
index 0000000..118d29a
--- /dev/null
+++ b/sass/jquery.scrollbar.scss
@@ -0,0 +1,793 @@
+/*************** SCROLLBAR BASE CSS ***************/
+
+.scroll-wrapper {
+ overflow: hidden !important;
+ padding: 0 !important;
+ position: relative;
+
+ & > .scroll-content {
+ border: none !important;
+ box-sizing: content-box !important;
+ height: auto;
+ left: 0;
+ margin: 0;
+ max-height: none;
+ max-width: none !important;
+ overflow: scroll !important;
+ padding: 0;
+ position: relative !important;
+ top: 0;
+ width: auto !important;
+
+ &::-webkit-scrollbar {
+ height: 0;
+ width: 0;
+ }
+ }
+ &.scroll--rtl {
+ direction: rtl;
+ }
+}
+
+.scroll-element {
+ box-sizing: content-box;
+ display: none;
+
+ div {
+ box-sizing: content-box;
+ }
+ .scroll-bar,
+ .scroll-arrow {
+ cursor: default;
+ }
+
+ &.scroll-x.scroll-scrollx_visible,
+ &.scroll-y.scroll-scrolly_visible {
+ display: block;
+ }
+}
+
+.scroll-textarea {
+ border: 1px solid #cccccc;
+ border-top-color: #999999;
+
+ & > .scroll-content {
+ overflow: hidden !important;
+
+ & > textarea {
+ border: none !important;
+ box-sizing: border-box;
+ height: 100% !important;
+ margin: 0;
+ max-height: none !important;
+ max-width: none !important;
+ overflow: scroll !important;
+ outline: none;
+ padding: 2px;
+ position: relative !important;
+ top: 0;
+ width: 100% !important;
+
+ &::-webkit-scrollbar {
+ height: 0;
+ width: 0;
+ }
+ }
+ }
+}
+
+
+
+
+/*************** SIMPLE INNER SCROLLBAR ***************/
+
+.scrollbar-inner > .scroll-element,
+.scrollbar-inner > .scroll-element div
+{
+ border: none;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ z-index: 10;
+}
+
+.scrollbar-inner > .scroll-element div {
+ display: block;
+ height: 100%;
+ left: 0;
+ top: 0;
+ width: 100%;
+}
+
+.scrollbar-inner > .scroll-element.scroll-x {
+ bottom: 2px;
+ height: 8px;
+ left: 0;
+ width: 100%;
+}
+
+.scrollbar-inner > .scroll-element.scroll-y {
+ height: 100%;
+ right: 2px;
+ top: 0;
+ width: 8px;
+}
+
+.scrollbar-inner > .scroll-element .scroll-element_outer {
+ overflow: hidden;
+}
+
+.scrollbar-inner > .scroll-element .scroll-element_outer,
+.scrollbar-inner > .scroll-element .scroll-element_track,
+.scrollbar-inner > .scroll-element .scroll-bar {
+ -webkit-border-radius: 8px;
+ -moz-border-radius: 8px;
+ border-radius: 8px;
+}
+
+.scrollbar-inner > .scroll-element .scroll-element_track,
+.scrollbar-inner > .scroll-element .scroll-bar {
+ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+ filter: alpha(opacity=40);
+ opacity: 0.4;
+}
+
+.scrollbar-inner > .scroll-element .scroll-element_track { background-color: #e0e0e0; }
+.scrollbar-inner > .scroll-element .scroll-bar { background-color: #c2c2c2; }
+.scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #919191; }
+.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; }
+
+
+/* update scrollbar offset if both scrolls are visible */
+
+.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }
+.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }
+
+
+.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }
+.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }
+
+
+
+
+
+
+
+
+
+
+/*************** SIMPLE OUTER SCROLLBAR ***************/
+
+.scrollbar-outer > .scroll-element,
+.scrollbar-outer > .scroll-element div
+{
+ border: none;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ z-index: 10;
+}
+
+.scrollbar-outer > .scroll-element {
+ background-color: #ffffff;
+}
+
+.scrollbar-outer > .scroll-element div {
+ display: block;
+ height: 100%;
+ left: 0;
+ top: 0;
+ width: 100%;
+}
+
+.scrollbar-outer > .scroll-element.scroll-x {
+ bottom: 0;
+ height: 12px;
+ left: 0;
+ width: 100%;
+}
+
+.scrollbar-outer > .scroll-element.scroll-y {
+ height: 100%;
+ right: 0;
+ top: 0;
+ width: 12px;
+}
+
+.scrollbar-outer > .scroll-element.scroll-x .scroll-element_outer { height: 8px; top: 2px; }
+.scrollbar-outer > .scroll-element.scroll-y .scroll-element_outer { left: 2px; width: 8px; }
+
+.scrollbar-outer > .scroll-element .scroll-element_outer { overflow: hidden; }
+.scrollbar-outer > .scroll-element .scroll-element_track { background-color: #eeeeee; }
+
+.scrollbar-outer > .scroll-element .scroll-element_outer,
+.scrollbar-outer > .scroll-element .scroll-element_track,
+.scrollbar-outer > .scroll-element .scroll-bar {
+ -webkit-border-radius: 8px;
+ -moz-border-radius: 8px;
+ border-radius: 8px;
+}
+
+.scrollbar-outer > .scroll-element .scroll-bar { background-color: #d9d9d9; }
+.scrollbar-outer > .scroll-element .scroll-bar:hover { background-color: #c2c2c2; }
+.scrollbar-outer > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; }
+
+
+/* scrollbar height/width & offset from container borders */
+
+.scrollbar-outer > .scroll-content.scroll-scrolly_visible { left: -12px; margin-left: 12px; }
+.scrollbar-outer > .scroll-content.scroll-scrollx_visible { top: -12px; margin-top: 12px; }
+
+.scrollbar-outer > .scroll-element.scroll-x .scroll-bar { min-width: 10px; }
+.scrollbar-outer > .scroll-element.scroll-y .scroll-bar { min-height: 10px; }
+
+
+/* update scrollbar offset if both scrolls are visible */
+
+.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -14px; }
+.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -14px; }
+
+.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -14px; }
+.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -14px; }
+
+
+
+
+
+
+
+
+
+
+/*************** SCROLLBAR MAC OS X ***************/
+
+.scrollbar-macosx > .scroll-element,
+.scrollbar-macosx > .scroll-element div
+{
+ background: none;
+ border: none;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ z-index: 10;
+}
+
+.scrollbar-macosx > .scroll-element div {
+ display: block;
+ height: 100%;
+ left: 0;
+ top: 0;
+ width: 100%;
+}
+
+.scrollbar-macosx > .scroll-element .scroll-element_track { display: none; }
+.scrollbar-macosx > .scroll-element .scroll-bar {
+ background-color: #6C6E71;
+ display: block;
+
+ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ opacity: 0;
+
+ -webkit-border-radius: 7px;
+ -moz-border-radius: 7px;
+ border-radius: 7px;
+
+ -webkit-transition: opacity 0.2s linear;
+ -moz-transition: opacity 0.2s linear;
+ -o-transition: opacity 0.2s linear;
+ -ms-transition: opacity 0.2s linear;
+ transition: opacity 0.2s linear;
+}
+.scrollbar-macosx:hover > .scroll-element .scroll-bar,
+.scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar {
+ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+ filter: alpha(opacity=70);
+ opacity: 0.7;
+}
+
+
+.scrollbar-macosx > .scroll-element.scroll-x {
+ bottom: 0px;
+ height: 0px;
+ left: 0;
+ min-width: 100%;
+ overflow: visible;
+ width: 100%;
+}
+
+.scrollbar-macosx > .scroll-element.scroll-y {
+ height: 100%;
+ min-height: 100%;
+ right: 0px;
+ top: 0;
+ width: 0px;
+}
+
+/* scrollbar height/width & offset from container borders */
+.scrollbar-macosx > .scroll-element.scroll-x .scroll-bar { height: 7px; min-width: 10px; top: -9px; }
+.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { left: -9px; min-height: 10px; width: 7px; }
+
+.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer { left: 2px; }
+.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size { left: -4px; }
+
+.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer { top: 2px; }
+.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size { top: -4px; }
+
+/* update scrollbar offset if both scrolls are visible */
+.scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; }
+.scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; }
+
+
+
+
+
+
+
+
+
+
+/*************** SCROLLBAR LIGHT ***************/
+
+.scrollbar-light > .scroll-element,
+.scrollbar-light > .scroll-element div {
+ border: none;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ z-index: 10;
+}
+
+.scrollbar-light > .scroll-element {
+ background-color: #ffffff;
+}
+
+.scrollbar-light > .scroll-element div {
+ display: block;
+ height: 100%;
+ left: 0;
+ top: 0;
+ width: 100%;
+}
+
+.scrollbar-light > .scroll-element .scroll-element_outer {
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+}
+
+.scrollbar-light > .scroll-element .scroll-element_size {
+ background: #dbdbdb;
+ background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+');
+ background: -moz-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
+ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dbdbdb), color-stop(100%,#e8e8e8));
+ background: -webkit-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%);
+ background: -o-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%);
+ background: -ms-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%);
+ background: linear-gradient(to right, #dbdbdb 0%,#e8e8e8 100%);
+
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+}
+
+.scrollbar-light > .scroll-element.scroll-x {
+ bottom: 0;
+ height: 17px;
+ left: 0;
+ min-width: 100%;
+ width: 100%;
+}
+
+.scrollbar-light > .scroll-element.scroll-y {
+ height: 100%;
+ min-height: 100%;
+ right: 0;
+ top: 0;
+ width: 17px;
+}
+
+.scrollbar-light > .scroll-element .scroll-bar {
+ background: #fefefe;
+ background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+');
+ background: -moz-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
+ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fefefe), color-stop(100%,#f5f5f5));
+ background: -webkit-linear-gradient(left, #fefefe 0%,#f5f5f5 100%);
+ background: -o-linear-gradient(left, #fefefe 0%,#f5f5f5 100%);
+ background: -ms-linear-gradient(left, #fefefe 0%,#f5f5f5 100%);
+ background: linear-gradient(to right, #fefefe 0%,#f5f5f5 100%);
+
+ border: 1px solid #dbdbdb;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+}
+
+/* scrollbar height/width & offset from container borders */
+
+.scrollbar-light > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; }
+.scrollbar-light > .scroll-content.scroll-scrollx_visible { top: -17px; margin-top: 17px; }
+
+.scrollbar-light > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 0px; }
+.scrollbar-light > .scroll-element.scroll-y .scroll-bar { left: 0px; min-height: 10px; width: 10px; }
+
+.scrollbar-light > .scroll-element.scroll-x .scroll-element_outer { height: 12px; left: 2px; top: 2px; }
+.scrollbar-light > .scroll-element.scroll-x .scroll-element_size { left: -4px; }
+
+.scrollbar-light > .scroll-element.scroll-y .scroll-element_outer { left: 2px; top: 2px; width: 12px; }
+.scrollbar-light > .scroll-element.scroll-y .scroll-element_size { top: -4px; }
+
+/* update scrollbar offset if both scrolls are visible */
+
+.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; }
+.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; }
+
+.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; }
+.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; }
+
+
+
+
+
+
+
+
+
+
+/*************** SCROLLBAR RAIL ***************/
+
+.scrollbar-rail > .scroll-element,
+.scrollbar-rail > .scroll-element div
+{
+ border: none;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ z-index: 10;
+}
+
+.scrollbar-rail > .scroll-element {
+ background-color: #ffffff;
+}
+
+.scrollbar-rail > .scroll-element div {
+ display: block;
+ height: 100%;
+ left: 0;
+ top: 0;
+ width: 100%;
+}
+
+.scrollbar-rail > .scroll-element .scroll-element_size {
+ background-color: #999;
+ background-color: rgba(0, 0, 0, 0.3);
+}
+
+.scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-element_size {
+ background-color: #666;
+ background-color: rgba(0, 0, 0, 0.5);
+}
+
+.scrollbar-rail > .scroll-element.scroll-x {
+ bottom: 0;
+ height: 12px;
+ left: 0;
+ min-width: 100%;
+ padding: 3px 0 2px;
+ width: 100%;
+}
+
+.scrollbar-rail > .scroll-element.scroll-y {
+ height: 100%;
+ min-height: 100%;
+ padding: 0 2px 0 3px;
+ right: 0;
+ top: 0;
+ width: 12px;
+}
+
+.scrollbar-rail > .scroll-element .scroll-bar {
+ background-color: #d0b9a0;
+
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
+
+ box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-bar {
+ box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
+}
+
+/* scrollbar height/width & offset from container borders */
+
+.scrollbar-rail > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; }
+.scrollbar-rail > .scroll-content.scroll-scrollx_visible { margin-top: 17px; top: -17px; }
+
+.scrollbar-rail > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 1px; }
+.scrollbar-rail > .scroll-element.scroll-y .scroll-bar { left: 1px; min-height: 10px; width: 10px; }
+
+.scrollbar-rail > .scroll-element.scroll-x .scroll-element_outer { height: 15px; left: 5px; }
+.scrollbar-rail > .scroll-element.scroll-x .scroll-element_size { height: 2px; left: -10px; top: 5px; }
+
+.scrollbar-rail > .scroll-element.scroll-y .scroll-element_outer { top: 5px; width: 15px; }
+.scrollbar-rail > .scroll-element.scroll-y .scroll-element_size { left: 5px; top: -10px; width: 2px; }
+
+/* update scrollbar offset if both scrolls are visible */
+
+.scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -25px; }
+.scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -25px; }
+
+.scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -25px; }
+.scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -25px; }
+
+
+
+
+
+
+
+
+
+
+/*************** SCROLLBAR DYNAMIC ***************/
+
+.scrollbar-dynamic > .scroll-element,
+.scrollbar-dynamic > .scroll-element div
+{
+ background: none;
+ border: none;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ z-index: 10;
+}
+
+.scrollbar-dynamic > .scroll-element div {
+ display: block;
+ height: 100%;
+ left: 0;
+ top: 0;
+ width: 100%;
+}
+
+.scrollbar-dynamic > .scroll-element.scroll-x {
+ bottom: 2px;
+ height: 7px;
+ left: 0;
+ min-width: 100%;
+ width: 100%;
+}
+
+.scrollbar-dynamic > .scroll-element.scroll-y {
+ height: 100%;
+ min-height: 100%;
+ right: 2px;
+ top: 0;
+ width: 7px;
+}
+
+.scrollbar-dynamic > .scroll-element .scroll-element_outer {
+ opacity: 0.3;
+
+ -webkit-border-radius: 12px;
+ -moz-border-radius: 12px;
+ border-radius: 12px;
+}
+.scrollbar-dynamic > .scroll-element .scroll-element_size {
+ background-color: #cccccc;
+ opacity: 0;
+
+ -webkit-border-radius: 12px;
+ -moz-border-radius: 12px;
+ border-radius: 12px;
+
+ -webkit-transition: opacity 0.2s;
+ -moz-transition: opacity 0.2s;
+ -o-transition: opacity 0.2s;
+ -ms-transition: opacity 0.2s;
+ transition: opacity 0.2s;
+}
+
+.scrollbar-dynamic > .scroll-element .scroll-bar {
+ background-color: #6c6e71;
+
+ -webkit-border-radius: 7px;
+ -moz-border-radius: 7px;
+ border-radius: 7px;
+}
+
+/* scrollbar height/width & offset from container borders */
+
+.scrollbar-dynamic > .scroll-element.scroll-x .scroll-bar {
+ bottom: 0;
+ height: 7px;
+ min-width: 24px;
+ top: auto;
+}
+.scrollbar-dynamic > .scroll-element.scroll-y .scroll-bar {
+ left: auto;
+ min-height: 24px;
+ right: 0;
+ width: 7px;
+}
+
+.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_outer {
+ bottom: 0;
+ top: auto;
+ left: 2px;
+
+ -webkit-transition: height 0.2s;
+ -moz-transition: height 0.2s;
+ -o-transition: height 0.2s;
+ -ms-transition: height 0.2s;
+ transition: height 0.2s;
+}
+
+.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_outer {
+ left: auto;
+ right: 0;
+ top: 2px;
+
+ -webkit-transition: width 0.2s;
+ -moz-transition: width 0.2s;
+ -o-transition: width 0.2s;
+ -ms-transition: width 0.2s;
+ transition: width 0.2s;
+}
+
+.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_size { left: -4px; }
+.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_size { top: -4px; }
+
+
+/* update scrollbar offset if both scrolls are visible */
+
+.scrollbar-dynamic > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; }
+.scrollbar-dynamic > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; }
+
+
+/* hover & drag */
+
+.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer,
+.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer {
+ overflow: hidden;
+
+ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+ filter: alpha(opacity=70);
+ opacity: 0.7;
+}
+.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-element_size,
+.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-element_size {
+ opacity: 1;
+}
+.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-bar,
+.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-bar {
+ height: 100%;
+ width: 100%;
+
+ -webkit-border-radius: 12px;
+ -moz-border-radius: 12px;
+ border-radius: 12px;
+}
+
+.scrollbar-dynamic > .scroll-element.scroll-x:hover .scroll-element_outer,
+.scrollbar-dynamic > .scroll-element.scroll-x.scroll-draggable .scroll-element_outer {
+ height: 20px;
+ min-height: 7px;
+}
+.scrollbar-dynamic > .scroll-element.scroll-y:hover .scroll-element_outer,
+.scrollbar-dynamic > .scroll-element.scroll-y.scroll-draggable .scroll-element_outer {
+ min-width: 7px;
+ width: 20px;
+}
+
+
+
+
+
+
+
+
+
+
+/*************** SCROLLBAR GOOGLE CHROME ***************/
+
+.scrollbar-chrome > .scroll-element,
+.scrollbar-chrome > .scroll-element div
+{
+ border: none;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ z-index: 10;
+}
+
+.scrollbar-chrome > .scroll-element {
+ background-color: #ffffff;
+}
+
+.scrollbar-chrome > .scroll-element div {
+ display: block;
+ height: 100%;
+ left: 0;
+ top: 0;
+ width: 100%;
+}
+
+.scrollbar-chrome > .scroll-element .scroll-element_outer {}
+
+.scrollbar-chrome > .scroll-element .scroll-element_track {
+ background: #f1f1f1;
+ border: 1px solid #dbdbdb;
+}
+
+.scrollbar-chrome > .scroll-element.scroll-x {
+ bottom: 0;
+ height: 16px;
+ left: 0;
+ min-width: 100%;
+ width: 100%;
+}
+
+.scrollbar-chrome > .scroll-element.scroll-y {
+ height: 100%;
+ min-height: 100%;
+ right: 0;
+ top: 0;
+ width: 16px;
+}
+
+.scrollbar-chrome > .scroll-element .scroll-bar {
+ background-color: #d9d9d9;
+ border: 1px solid #bdbdbd;
+ cursor: default;
+
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
+}
+
+.scrollbar-chrome > .scroll-element .scroll-bar:hover {
+ background-color: #c2c2c2;
+ border-color: #a9a9a9;
+}
+
+.scrollbar-chrome > .scroll-element.scroll-draggable .scroll-bar {
+ background-color: #919191;
+ border-color: #7e7e7e;
+}
+
+/* scrollbar height/width & offset from container borders */
+
+.scrollbar-chrome > .scroll-content.scroll-scrolly_visible { left: -16px; margin-left: 16px; }
+.scrollbar-chrome > .scroll-content.scroll-scrollx_visible { top: -16px; margin-top: 16px; }
+
+.scrollbar-chrome > .scroll-element.scroll-x .scroll-bar { height: 8px; min-width: 10px; top: 3px; }
+.scrollbar-chrome > .scroll-element.scroll-y .scroll-bar { left: 3px; min-height: 10px; width: 8px; }
+
+.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_outer { border-left: 1px solid #dbdbdb; }
+.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_track { height: 14px; left: -3px; }
+.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_size { height: 14px; left: -4px; }
+
+.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_outer { border-top: 1px solid #dbdbdb; }
+.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_track { top: -3px; width: 14px; }
+.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_size { top: -4px; width: 14px; }
+
+/* update scrollbar offset if both scrolls are visible */
+
+.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; }
+.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; }
+
+.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; }
+.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; }
+
+
+
+
+
+
+
diff --git a/sass/package.json b/sass/package.json
new file mode 100644
index 0000000..fd871d6
--- /dev/null
+++ b/sass/package.json
@@ -0,0 +1,9 @@
+{
+ "name": "jquery.scrollbar",
+ "version": "0.2.11",
+ "devDependencies": {
+ "grunt": "~0.4.1",
+ "grunt-contrib-compass": "^1.0.4",
+ "grunt-contrib-watch": "~0.6.1"
+ }
+}
diff --git a/scrollbar.jquery.json b/scrollbar.jquery.json
index baa4884..fa0156b 100644
--- a/scrollbar.jquery.json
+++ b/scrollbar.jquery.json
@@ -6,7 +6,7 @@
"scroll",
"scrollbar"
],
- "version": "0.2.7",
+ "version": "0.2.11",
"author": {
"name": "Yuriy Khabarov",
"email": "13real008@gmail.com"