perfect-scrollbar/src/perfect-scrollbar.js
Adrian Carneiro fa806adb55 Added 4 new setting options (suppressScrollX, suppressScrollY, scrollXMarginOffset and scrollYMarginOffset)
Added 4 new setting options (suppressScrollX, suppressScrollY,
scrollXMarginOffset and scrollYMarginOffset)
2013-11-06 15:20:30 -05:00

599 lines
21 KiB
JavaScript

/* Copyright (c) 2012 HyeonJe Jun (http://github.com/noraesae)
* Licensed under the MIT License
*/
'use strict';
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
// The default settings for the plugin
var defaultSettings = {
wheelSpeed: 10,
wheelPropagation: false,
minScrollbarLength: null,
useBothWheelAxes: false,
useKeyboard: true,
suppressScrollX: false,
suppressScrollY: false,
scrollXMarginOffset: 0,
scrollYMarginOffset: 0
};
$.fn.perfectScrollbar = function (suppliedSettings, option) {
return this.each(function () {
// Use the default settings
var settings = $.extend(true, {}, defaultSettings),
$this = $(this);
if (typeof suppliedSettings === "object") {
// But over-ride any supplied
$.extend(true, settings, suppliedSettings);
} else {
// If no settings were supplied, then the first param must be the option
option = suppliedSettings;
}
// Catch options
if (option === 'update') {
if ($this.data('perfect-scrollbar-update')) {
$this.data('perfect-scrollbar-update')();
}
return $this;
}
else if (option === 'destroy') {
if ($this.data('perfect-scrollbar-destroy')) {
$this.data('perfect-scrollbar-destroy')();
}
return $this;
}
if ($this.data('perfect-scrollbar')) {
// if there's already perfect-scrollbar
return $this.data('perfect-scrollbar');
}
// Or generate new perfectScrollbar
// Set class to the container
$this.addClass('ps-container');
var $scrollbarXRail = $("<div class='ps-scrollbar-x-rail'></div>").appendTo($this),
$scrollbarYRail = $("<div class='ps-scrollbar-y-rail'></div>").appendTo($this),
$scrollbarX = $("<div class='ps-scrollbar-x'></div>").appendTo($scrollbarXRail),
$scrollbarY = $("<div class='ps-scrollbar-y'></div>").appendTo($scrollbarYRail),
scrollbarXActive,
scrollbarYActive,
containerWidth,
containerHeight,
contentWidth,
contentHeight,
scrollbarXWidth,
scrollbarXLeft,
scrollbarXBottom = parseInt($scrollbarXRail.css('bottom'), 10),
scrollbarYHeight,
scrollbarYTop,
scrollbarYRight = parseInt($scrollbarYRail.css('right'), 10);
var updateContentScrollTop = function () {
var scrollTop = parseInt(scrollbarYTop * (contentHeight - containerHeight) / (containerHeight - scrollbarYHeight), 10);
$this.scrollTop(scrollTop);
$scrollbarXRail.css({bottom: scrollbarXBottom - scrollTop});
};
var updateContentScrollLeft = function () {
var scrollLeft = parseInt(scrollbarXLeft * (contentWidth - containerWidth) / (containerWidth - scrollbarXWidth), 10);
$this.scrollLeft(scrollLeft);
$scrollbarYRail.css({right: scrollbarYRight - scrollLeft});
};
var getSettingsAdjustedThumbSize = function (thumbSize) {
if (settings.minScrollbarLength) {
thumbSize = Math.max(thumbSize, settings.minScrollbarLength);
}
return thumbSize;
};
var updateScrollbarCss = function () {
$scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: containerWidth, display: settings.suppressScrollX ? "none": "inherit"});
$scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: containerHeight, display: settings.suppressScrollY ? "none": "inherit"});
$scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth});
$scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight});
};
var updateBarSizeAndPosition = function () {
containerWidth = $this.width();
containerHeight = $this.height();
contentWidth = $this.prop('scrollWidth');
contentHeight = $this.prop('scrollHeight');
if (!settings.suppressScrollX && containerWidth + settings.scrollXMarginOffset < contentWidth) {
scrollbarXActive = true;
scrollbarXWidth = getSettingsAdjustedThumbSize(parseInt(containerWidth * containerWidth / contentWidth, 10));
scrollbarXLeft = parseInt($this.scrollLeft() * (containerWidth - scrollbarXWidth) / (contentWidth - containerWidth), 10);
}
else {
scrollbarXActive = false;
scrollbarXWidth = 0;
scrollbarXLeft = 0;
$this.scrollLeft(0);
}
if (!settings.suppressScrollY && containerHeight + settings.scrollYMarginOffset < contentHeight) {
scrollbarYActive = true;
scrollbarYHeight = getSettingsAdjustedThumbSize(parseInt(containerHeight * containerHeight / contentHeight, 10));
scrollbarYTop = parseInt($this.scrollTop() * (containerHeight - scrollbarYHeight) / (contentHeight - containerHeight), 10);
}
else {
scrollbarYActive = false;
scrollbarYHeight = 0;
scrollbarYTop = 0;
$this.scrollTop(0);
}
if (scrollbarYTop >= containerHeight - scrollbarYHeight) {
scrollbarYTop = containerHeight - scrollbarYHeight;
}
if (scrollbarXLeft >= containerWidth - scrollbarXWidth) {
scrollbarXLeft = containerWidth - scrollbarXWidth;
}
updateScrollbarCss();
};
var moveBarX = function (currentLeft, deltaX) {
var newLeft = currentLeft + deltaX,
maxLeft = containerWidth - scrollbarXWidth;
if (newLeft < 0) {
scrollbarXLeft = 0;
}
else if (newLeft > maxLeft) {
scrollbarXLeft = maxLeft;
}
else {
scrollbarXLeft = newLeft;
}
$scrollbarXRail.css({left: $this.scrollLeft()});
$scrollbarX.css({left: scrollbarXLeft});
};
var moveBarY = function (currentTop, deltaY) {
var newTop = currentTop + deltaY,
maxTop = containerHeight - scrollbarYHeight;
if (newTop < 0) {
scrollbarYTop = 0;
}
else if (newTop > maxTop) {
scrollbarYTop = maxTop;
}
else {
scrollbarYTop = newTop;
}
$scrollbarYRail.css({top: $this.scrollTop()});
$scrollbarY.css({top: scrollbarYTop});
};
var bindMouseScrollXHandler = function () {
var currentLeft,
currentPageX;
$scrollbarX.bind('mousedown.perfect-scrollbar', function (e) {
currentPageX = e.pageX;
currentLeft = $scrollbarX.position().left;
$scrollbarXRail.addClass('in-scrolling');
e.stopPropagation();
e.preventDefault();
});
$(document).bind('mousemove.perfect-scrollbar', function (e) {
if ($scrollbarXRail.hasClass('in-scrolling')) {
updateContentScrollLeft();
moveBarX(currentLeft, e.pageX - currentPageX);
e.stopPropagation();
e.preventDefault();
}
});
$(document).bind('mouseup.perfect-scrollbar', function (e) {
if ($scrollbarXRail.hasClass('in-scrolling')) {
$scrollbarXRail.removeClass('in-scrolling');
}
});
currentLeft =
currentPageX = null;
};
var bindMouseScrollYHandler = function () {
var currentTop,
currentPageY;
$scrollbarY.bind('mousedown.perfect-scrollbar', function (e) {
currentPageY = e.pageY;
currentTop = $scrollbarY.position().top;
$scrollbarYRail.addClass('in-scrolling');
e.stopPropagation();
e.preventDefault();
});
$(document).bind('mousemove.perfect-scrollbar', function (e) {
if ($scrollbarYRail.hasClass('in-scrolling')) {
updateContentScrollTop();
moveBarY(currentTop, e.pageY - currentPageY);
e.stopPropagation();
e.preventDefault();
}
});
$(document).bind('mouseup.perfect-scrollbar', function (e) {
if ($scrollbarYRail.hasClass('in-scrolling')) {
$scrollbarYRail.removeClass('in-scrolling');
}
});
currentTop =
currentPageY = null;
};
// bind handlers
var bindMouseWheelHandler = function () {
var shouldPreventDefault = function (deltaX, deltaY) {
var scrollTop = $this.scrollTop();
if (scrollTop === 0 && deltaY > 0 && deltaX === 0) {
return !settings.wheelPropagation;
}
else if (scrollTop >= contentHeight - containerHeight && deltaY < 0 && deltaX === 0) {
return !settings.wheelPropagation;
}
var scrollLeft = $this.scrollLeft();
if (scrollLeft === 0 && deltaX < 0 && deltaY === 0) {
return !settings.wheelPropagation;
}
else if (scrollLeft >= contentWidth - containerWidth && deltaX > 0 && deltaY === 0) {
return !settings.wheelPropagation;
}
return true;
};
var shouldPrevent = false;
$this.bind('mousewheel.perfect-scrollbar', function (e, delta, deltaX, deltaY) {
if (!settings.useBothWheelAxes) {
// deltaX will only be used for horizontal scrolling and deltaY will
// only be used for vertical scrolling - this is the default
$this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
$this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
} else if (scrollbarYActive && !scrollbarXActive) {
// only vertical scrollbar is active and useBothWheelAxes option is
// active, so let's scroll vertical bar using both mouse wheel axes
if (deltaY) {
$this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
} else {
$this.scrollTop($this.scrollTop() + (deltaX * settings.wheelSpeed));
}
} else if (scrollbarXActive && !scrollbarYActive) {
// useBothWheelAxes and only horizontal bar is active, so use both
// wheel axes for horizontal bar
if (deltaX) {
$this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
} else {
$this.scrollLeft($this.scrollLeft() - (deltaY * settings.wheelSpeed));
}
}
// update bar position
updateBarSizeAndPosition();
shouldPrevent = shouldPreventDefault(deltaX, deltaY);
if (shouldPrevent) {
e.preventDefault();
}
});
// fix Firefox scroll problem
$this.bind('MozMousePixelScroll.perfect-scrollbar', function (e) {
if (shouldPrevent) {
e.preventDefault();
}
});
};
var bindKeyboardHandler = function () {
var shouldPreventDefault = function (deltaX, deltaY) {
var scrollTop = $this.scrollTop();
if (scrollTop === 0 && deltaY > 0 && deltaX === 0) {
return false;
}
else if (scrollTop >= contentHeight - containerHeight && deltaY < 0 && deltaX === 0) {
return false;
}
var scrollLeft = $this.scrollLeft();
if (scrollLeft === 0 && deltaX < 0 && deltaY === 0) {
return false;
}
else if (scrollLeft >= contentWidth - containerWidth && deltaX > 0 && deltaY === 0) {
return false;
}
return true;
};
var hovered = false;
$this.bind('mouseenter.perfect-scrollbar', function (e) {
hovered = true;
});
$this.bind('mouseleave.perfect-scrollbar', function (e) {
hovered = false;
});
var shouldPrevent = false;
$(document).bind('keydown.perfect-scrollbar', function (e) {
if (!hovered) {
return;
}
var deltaX = 0,
deltaY = 0;
switch (e.which) {
case 37: // left
deltaX = -3;
break;
case 38: // up
deltaY = 3;
break;
case 39: // right
deltaX = 3;
break;
case 40: // down
deltaY = -3;
break;
default:
return;
}
$this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
$this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
// update bar position
updateBarSizeAndPosition();
shouldPrevent = shouldPreventDefault(deltaX, deltaY);
if (shouldPrevent) {
e.preventDefault();
}
});
};
var bindRailClickHandler = function () {
var stopPropagation = function (e) { e.stopPropagation(); };
$scrollbarY.bind('click.perfect-scrollbar', stopPropagation);
$scrollbarYRail.bind('click.perfect-scrollbar', function (e) {
var halfOfScrollbarLength = parseInt(scrollbarYHeight / 2, 10),
positionTop = e.pageY - $scrollbarYRail.offset().top - halfOfScrollbarLength,
maxPositionTop = containerHeight - scrollbarYHeight,
positionRatio = positionTop / maxPositionTop;
if (positionRatio < 0) {
positionRatio = 0;
} else if (positionRatio > 1) {
positionRatio = 1;
}
$this.scrollTop((contentHeight - containerHeight) * positionRatio);
// update bar position
updateBarSizeAndPosition();
});
$scrollbarX.bind('click.perfect-scrollbar', stopPropagation);
$scrollbarXRail.bind('click.perfect-scrollbar', function (e) {
var halfOfScrollbarLength = parseInt(scrollbarXWidth / 2, 10),
positionLeft = e.pageX - $scrollbarXRail.offset().left - halfOfScrollbarLength,
maxPositionLeft = containerWidth - scrollbarXWidth,
positionRatio = positionLeft / maxPositionLeft;
if (positionRatio < 0) {
positionRatio = 0;
} else if (positionRatio > 1) {
positionRatio = 1;
}
$this.scrollLeft((contentWidth - containerWidth) * positionRatio);
// update bar position
updateBarSizeAndPosition();
});
};
// bind mobile touch handler
var bindMobileTouchHandler = function () {
var applyTouchMove = function (differenceX, differenceY) {
$this.scrollTop($this.scrollTop() - differenceY);
$this.scrollLeft($this.scrollLeft() - differenceX);
// update bar position
updateBarSizeAndPosition();
};
var startCoords = {},
startTime = 0,
speed = {},
breakingProcess = null,
inGlobalTouch = false;
$(window).bind("touchstart.perfect-scrollbar", function (e) {
inGlobalTouch = true;
});
$(window).bind("touchend.perfect-scrollbar", function (e) {
inGlobalTouch = false;
});
$this.bind("touchstart.perfect-scrollbar", function (e) {
var touch = e.originalEvent.targetTouches[0];
startCoords.pageX = touch.pageX;
startCoords.pageY = touch.pageY;
startTime = (new Date()).getTime();
if (breakingProcess !== null) {
clearInterval(breakingProcess);
}
e.stopPropagation();
});
$this.bind("touchmove.perfect-scrollbar", function (e) {
if (!inGlobalTouch && e.originalEvent.targetTouches.length === 1) {
var touch = e.originalEvent.targetTouches[0];
var currentCoords = {};
currentCoords.pageX = touch.pageX;
currentCoords.pageY = touch.pageY;
var differenceX = currentCoords.pageX - startCoords.pageX,
differenceY = currentCoords.pageY - startCoords.pageY;
applyTouchMove(differenceX, differenceY);
startCoords = currentCoords;
var currentTime = (new Date()).getTime();
speed.x = differenceX / (currentTime - startTime);
speed.y = differenceY / (currentTime - startTime);
startTime = currentTime;
e.preventDefault();
}
});
$this.bind("touchend.perfect-scrollbar", function (e) {
clearInterval(breakingProcess);
breakingProcess = setInterval(function () {
if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
clearInterval(breakingProcess);
return;
}
applyTouchMove(speed.x * 30, speed.y * 30);
speed.x *= 0.8;
speed.y *= 0.8;
}, 10);
});
};
var destroy = function () {
$this.unbind('.perfect-scrollbar');
$(window).unbind('.perfect-scrollbar');
$(document).unbind('.perfect-scrollbar');
$this.data('perfect-scrollbar', null);
$this.data('perfect-scrollbar-update', null);
$this.data('perfect-scrollbar-destroy', null);
$scrollbarX.remove();
$scrollbarY.remove();
$scrollbarXRail.remove();
$scrollbarYRail.remove();
// clean all variables
$scrollbarX =
$scrollbarY =
containerWidth =
containerHeight =
contentWidth =
contentHeight =
scrollbarXWidth =
scrollbarXLeft =
scrollbarXBottom =
scrollbarYHeight =
scrollbarYTop =
scrollbarYRight = null;
};
var ieSupport = function (version) {
$this.addClass('ie').addClass('ie' + version);
var bindHoverHandlers = function () {
var mouseenter = function () {
$(this).addClass('hover');
};
var mouseleave = function () {
$(this).removeClass('hover');
};
$this.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
$scrollbarXRail.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
$scrollbarYRail.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
$scrollbarX.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
$scrollbarY.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
};
var fixIe6ScrollbarPosition = function () {
updateScrollbarCss = function () {
$scrollbarX.css({left: scrollbarXLeft + $this.scrollLeft(), bottom: scrollbarXBottom, width: scrollbarXWidth});
$scrollbarY.css({top: scrollbarYTop + $this.scrollTop(), right: scrollbarYRight, height: scrollbarYHeight});
$scrollbarX.hide().show();
$scrollbarY.hide().show();
};
updateContentScrollTop = function () {
var scrollTop = parseInt(scrollbarYTop * contentHeight / containerHeight, 10);
$this.scrollTop(scrollTop);
$scrollbarX.css({bottom: scrollbarXBottom});
$scrollbarX.hide().show();
};
updateContentScrollLeft = function () {
var scrollLeft = parseInt(scrollbarXLeft * contentWidth / containerWidth, 10);
$this.scrollLeft(scrollLeft);
$scrollbarY.hide().show();
};
};
if (version === 6) {
bindHoverHandlers();
fixIe6ScrollbarPosition();
}
};
var supportsTouch = (('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch);
var initialize = function () {
var ieMatch = navigator.userAgent.toLowerCase().match(/(msie) ([\w.]+)/);
if (ieMatch && ieMatch[1] === 'msie') {
// must be executed at first, because 'ieSupport' may addClass to the container
ieSupport(parseInt(ieMatch[2], 10));
}
updateBarSizeAndPosition();
bindMouseScrollXHandler();
bindMouseScrollYHandler();
bindRailClickHandler();
if (supportsTouch) {
bindMobileTouchHandler();
}
if ($this.mousewheel) {
bindMouseWheelHandler();
}
if (settings.useKeyboard) {
bindKeyboardHandler();
}
$this.data('perfect-scrollbar', $this);
$this.data('perfect-scrollbar-update', updateBarSizeAndPosition);
$this.data('perfect-scrollbar-destroy', destroy);
};
// initialize
initialize();
return $this;
});
};
}));