mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-23 10:20:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

version 1.4.0

Browse Source
This commit is contained in:
Rene
2018-03-02 21:38:07 +01:00
parent 8bc44e9f0a
commit a29a279aba
8 changed files with 283 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
View File
@@ -212,7 +212,7 @@ Take the table below only as a overview of all options.
<td>autoHide</td> <td>autoHide</td>
<td>string</td> <td>string</td>
<td><code>"never"</code></td> <td><code>"never"</code></td>
<td>The possibility to hide visible scrollbars after a certain action.</td> <td>The possibility to hide visible scrollbars automatically after a certain action.</td>
</tr> </tr>
<tr> <tr>
<td></td> <td></td>
css/OverlayScrollbars.css
+2 -2
View File
@@ -2,13 +2,13 @@
* OverlayScrollbars * OverlayScrollbars
* https://github.com/KingSora/OverlayScrollbars * https://github.com/KingSora/OverlayScrollbars
* *
* Version: 1.3.0 * Version: 1.4.0
* *
* Copyright KingSora. * Copyright KingSora.
* https://github.com/KingSora * https://github.com/KingSora
* *
* Released under the MIT license. * Released under the MIT license.
* Date: 26.02.2018 * Date: 02.03.2018
*/ */
/* /*
css/OverlayScrollbars.min.css
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
js/OverlayScrollbars.js
+146 -112
View File
@@ -2,13 +2,13 @@
* OverlayScrollbars * OverlayScrollbars
* https://github.com/KingSora/OverlayScrollbars * https://github.com/KingSora/OverlayScrollbars
* *
* Version: 1.3.0 * Version: 1.4.0
* *
* Copyright KingSora. * Copyright KingSora.
* https://github.com/KingSora * https://github.com/KingSora
* *
* Released under the MIT license. * Released under the MIT license.
* Date: 26.02.2018 * Date: 02.03.2018
*/ */
(function (global, factory) { (function (global, factory) {
@@ -21,7 +21,7 @@
}(typeof window !== 'undefined' ? window : this, (function(window, document, undefined) { }(typeof window !== 'undefined' ? window : this, (function(window, document, undefined) {
'use-strict'; 'use-strict';
var PLUGINNAME = 'OverlayScrollbars'; var PLUGINNAME = 'OverlayScrollbars';
var TYPES = { var TYPES = {
o : 'object', o : 'object',
f : 'function', f : 'function',
@@ -1189,7 +1189,7 @@
return FakejQuery; return FakejQuery;
})(COMPATIBILITY); })(COMPATIBILITY);
var INSTANCES = (function(helper) { var INSTANCES = (function(helper) {
var _targets = [ ]; var _targets = [ ];
var _instancePropertyString = '__overlayScrollbars__'; var _instancePropertyString = '__overlayScrollbars__';
@@ -1406,7 +1406,7 @@
}, },
scrollbars : { scrollbars : {
visibility : 'auto', //visible || hidden || auto || v || h || a visibility : 'auto', //visible || hidden || auto || v || h || a
autoHide : 'never', //never || scroll || leave || n || s || l autoHide : 'never', //never || scroll || leave || move || n || s || l || m
autoHideDelay : 800, //number autoHideDelay : 800, //number
dragScrolling : true, //true || false dragScrolling : true, //true || false
clickScrolling : false, //true || false clickScrolling : false, //true || false
@@ -1457,7 +1457,7 @@
var nativeScrollbarSize = (function() { var nativeScrollbarSize = (function() {
bodyElement.append(scrollbarDummyElement); bodyElement.append(scrollbarDummyElement);
var strOverflow = 'overflow'; var strOverflow = 'overflow';
var strHidden = 'hidden'; var strHidden = 'hidden';
var scrollbarDummyElement0 = scrollbarDummyElement[0]; var scrollbarDummyElement0 = scrollbarDummyElement[0];
var dummyContainerChild = helper(scrollbarDummyElement.children('div').first()); var dummyContainerChild = helper(scrollbarDummyElement.children('div').first());
var IEBUGFIX = scrollbarDummyElement0[WORDING.oH]; //IE9 causes a bug where offsetHeight is zero for no reason var IEBUGFIX = scrollbarDummyElement0[WORDING.oH]; //IE9 causes a bug where offsetHeight is zero for no reason
@@ -1468,44 +1468,44 @@
x: scrollbarDummyElement0[WORDING.oH] - scrollbarDummyElement0[WORDING.cH], x: scrollbarDummyElement0[WORDING.oH] - scrollbarDummyElement0[WORDING.cH],
y: scrollbarDummyElement0[WORDING.oW] - scrollbarDummyElement0[WORDING.cW] y: scrollbarDummyElement0[WORDING.oW] - scrollbarDummyElement0[WORDING.cW]
}; };
//https://bugzilla.mozilla.org/show_bug.cgi?id=1439305 //https://bugzilla.mozilla.org/show_bug.cgi?id=1439305
_base.restrictedMeasuring = (function() { _base.restrictedMeasuring = (function() {
scrollbarDummyElement.css(strOverflow, strHidden); scrollbarDummyElement.css(strOverflow, strHidden);
var scrollSize = { var scrollSize = {
w : scrollbarDummyElement0[WORDING.sW], w : scrollbarDummyElement0[WORDING.sW],
h : scrollbarDummyElement0[WORDING.sH] h : scrollbarDummyElement0[WORDING.sH]
}; };
scrollbarDummyElement.css(strOverflow, 'visible'); scrollbarDummyElement.css(strOverflow, 'visible');
var scrollSize2 = { var scrollSize2 = {
w : scrollbarDummyElement0[WORDING.sW], w : scrollbarDummyElement0[WORDING.sW],
h : scrollbarDummyElement0[WORDING.sH] h : scrollbarDummyElement0[WORDING.sH]
}; };
return (scrollSize.w - scrollSize2.w) !== 0 || (scrollSize.h - scrollSize2.h) !== 0; return (scrollSize.w - scrollSize2.w) !== 0 || (scrollSize.h - scrollSize2.h) !== 0;
})(); })();
_base.nativeScrollbarStyling = (function() { _base.nativeScrollbarStyling = (function() {
scrollbarDummyElement.addClass('os-viewport-native-scrollbars-invisible'); scrollbarDummyElement.addClass('os-viewport-native-scrollbars-invisible');
scrollbarDummyElement.css(strOverflow, strHidden).hide().css(strOverflow, 'scroll').show(); //fix opera bug: scrollbar styles will only appear if overflow value is scroll or auto during the activation of the style. scrollbarDummyElement.css(strOverflow, strHidden).hide().css(strOverflow, 'scroll').show(); //fix opera bug: scrollbar styles will only appear if overflow value is scroll or auto during the activation of the style.
return (scrollbarDummyElement0[WORDING.oH] - scrollbarDummyElement0[WORDING.cH]) === 0 && (scrollbarDummyElement0[WORDING.oW] - scrollbarDummyElement0[WORDING.cW]) === 0; return (scrollbarDummyElement0[WORDING.oH] - scrollbarDummyElement0[WORDING.cH]) === 0 && (scrollbarDummyElement0[WORDING.oW] - scrollbarDummyElement0[WORDING.cW]) === 0;
})(); })();
_base.rtlScrollBehavior = (function() { _base.rtlScrollBehavior = (function() {
scrollbarDummyElement.css({ 'overflow-y' : strHidden, 'direction' : 'rtl' }).scrollLeft(0); scrollbarDummyElement.css({ 'overflow-y' : strHidden, 'direction' : 'rtl' }).scrollLeft(0);
var dummyContainerOffset = scrollbarDummyElement.offset(); var dummyContainerOffset = scrollbarDummyElement.offset();
var dummyContainerChildOffset = dummyContainerChild.offset(); var dummyContainerChildOffset = dummyContainerChild.offset();
scrollbarDummyElement.scrollLeft(999); scrollbarDummyElement.scrollLeft(999);
var dummyContainerScrollOffsetAfterScroll = dummyContainerChild.offset(); var dummyContainerScrollOffsetAfterScroll = dummyContainerChild.offset();
return { return {
//origin direction = determines if the zero scroll position is on the left or right side //origin direction = determines if the zero scroll position is on the left or right side
//'i' means 'invert' (i === true means that the axis must be inverted to be correct) //'i' means 'invert' (i === true means that the axis must be inverted to be correct)
//true = on the left side //true = on the left side
//false = on the right side //false = on the right side
i : dummyContainerOffset.left === dummyContainerChildOffset.left, i : dummyContainerOffset.left === dummyContainerChildOffset.left,
//negative = determines if the maximum scroll is positive or negative //negative = determines if the maximum scroll is positive or negative
//'n' means 'negate' (n === true means that the axis must be negated to be correct) //'n' means 'negate' (n === true means that the axis must be negated to be correct)
//true = negative //true = negative
//false = positive //false = positive
n : dummyContainerChildOffset.left - dummyContainerScrollOffsetAfterScroll.left === 0 n : dummyContainerChildOffset.left - dummyContainerScrollOffsetAfterScroll.left === 0
}; };
})(); })();
scrollbarDummyElement.removeAttr(WORDING.s).remove(); scrollbarDummyElement.removeAttr(WORDING.s).remove();
return scrollbarSize; return scrollbarSize;
})(); })();
@@ -1799,7 +1799,7 @@
var _supportTransform; var _supportTransform;
var _supportPassiveEvents; var _supportPassiveEvents;
var _supportResizeObserver; var _supportResizeObserver;
var _restrictedMeasuring; var _restrictedMeasuring;
var _isBorderBox; var _isBorderBox;
var _paddingX; var _paddingX;
var _paddingY; var _paddingY;
@@ -1846,6 +1846,8 @@
var _strMouseTouchDownEvent = 'mousedown touchstart'; var _strMouseTouchDownEvent = 'mousedown touchstart';
var _strMouseTouchUpEvent = 'mouseup touchend'; var _strMouseTouchUpEvent = 'mouseup touchend';
var _strMouseTouchMoveEvent = 'mousemove touchmove'; var _strMouseTouchMoveEvent = 'mousemove touchmove';
var _strMouseTouchEnter = 'mouseenter';
var _strMouseTouchLeave = 'mouseleave';
var _strKeyDownEvent = 'keydown'; var _strKeyDownEvent = 'keydown';
var _strKeyUpEvent = 'keyup'; var _strKeyUpEvent = 'keyup';
var _strSelectStartEvent = 'selectstart'; var _strSelectStartEvent = 'selectstart';
@@ -1997,12 +1999,14 @@
//scrollbars: //scrollbars:
var _scrollbarsAutoHideTimeoutId; var _scrollbarsAutoHideTimeoutId;
var _scrollbarsAutoHideMoveTimeoutId;
var _scrollbarsAutoHideDelay; var _scrollbarsAutoHideDelay;
var _scrollbarsAutoHideNever; var _scrollbarsAutoHideNever;
var _scrollbarsAutoHideScroll; var _scrollbarsAutoHideScroll;
var _scrollbarsAutoHideMove;
var _scrollbarsAutoHideLeave; var _scrollbarsAutoHideLeave;
var _scrollbarsTouchSupport; var _scrollbarsTouchSupport;
var _scrollbarsAutoHideScrollAndHovered; var _scrollbarsAutoHideFlagScrollAndHovered;
//resize //resize
var _resizeReconnectMutationObserver; var _resizeReconnectMutationObserver;
@@ -2377,8 +2381,8 @@
* @param args The args with which the callback shall be called. * @param args The args with which the callback shall be called.
*/ */
function callCallback(callback, args) { function callCallback(callback, args) {
if(_initialized) if(_initialized)
callback.call(_base, args); callback.call(_base, args);
} }
/** /**
@@ -2754,11 +2758,11 @@
else { else {
var strActive = 'active'; var strActive = 'active';
var hide = function () { var hide = function () {
if (!_scrollbarsAutoHideScrollAndHovered) { if (!_scrollbarsAutoHideFlagScrollAndHovered) {
var anyActive = _scrollbarHorizontalHandleElement.hasClass(strActive) || _scrollbarVerticalHandleElement.hasClass(strActive); var anyActive = _scrollbarHorizontalHandleElement.hasClass(strActive) || _scrollbarVerticalHandleElement.hasClass(strActive);
if (!anyActive && (_scrollbarsAutoHideScroll || _scrollbarsAutoHideLeave)) if (!anyActive && (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove || _scrollbarsAutoHideLeave))
_scrollbarHorizontalElement.addClass(_classNameScrollbarAutoHidden); _scrollbarHorizontalElement.addClass(_classNameScrollbarAutoHidden);
if (!anyActive && (_scrollbarsAutoHideScroll || _scrollbarsAutoHideLeave)) if (!anyActive && (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove || _scrollbarsAutoHideLeave))
_scrollbarVerticalElement.addClass(_classNameScrollbarAutoHidden); _scrollbarVerticalElement.addClass(_classNameScrollbarAutoHidden);
} }
}; };
@@ -2979,7 +2983,7 @@
event.clientY >= rect.top && event.clientY <= rect.bottom)) { event.clientY >= rect.top && event.clientY <= rect.bottom)) {
hostOnMouseLeave(); hostOnMouseLeave();
} }
if (_scrollbarsAutoHideScroll) if (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove)
refreshScrollbarsAutoHide(false); refreshScrollbarsAutoHide(false);
}; };
var documentKeyDown = function (event) { var documentKeyDown = function (event) {
@@ -3101,13 +3105,13 @@
compatibility.prvD(event); compatibility.prvD(event);
} }
}).hover(function () { //make sure both scrollbars will stay visible if one scrollbar is hovered if autoHide is "scroll". }).hover(function () { //make sure both scrollbars will stay visible if one scrollbar is hovered if autoHide is "scroll".
if (_scrollbarsAutoHideScroll) { if (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove) {
_scrollbarsAutoHideScrollAndHovered = true; _scrollbarsAutoHideFlagScrollAndHovered = true;
refreshScrollbarsAutoHide(true); refreshScrollbarsAutoHide(true);
} }
}, function () { }, function () {
if (_scrollbarsAutoHideScroll) { if (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove) {
_scrollbarsAutoHideScrollAndHovered = false; _scrollbarsAutoHideFlagScrollAndHovered = false;
refreshScrollbarsAutoHide(false); refreshScrollbarsAutoHide(false);
} }
}); });
@@ -3154,6 +3158,20 @@
refreshScrollbarsAutoHide(false); refreshScrollbarsAutoHide(false);
} }
/**
* The mouse leave event of the host element. This event is only needed for the autoHide feature.
*/
function hostOnMouseMove() {
if (_scrollbarsAutoHideMove) {
refreshScrollbarsAutoHide(true);
clearTimeout(_scrollbarsAutoHideMoveTimeoutId);
_scrollbarsAutoHideMoveTimeoutId = setTimeout(function () {
if (_scrollbarsAutoHideMove)
refreshScrollbarsAutoHide(false);
}, 100);
}
}
/** /**
* The scroll event of the viewport element. That is the main scroll event. It controls also the "scroll", "scrollStart" and "scrollStop" callbacks. * The scroll event of the viewport element. That is the main scroll event. It controls also the "scroll", "scrollStart" and "scrollStop" callbacks.
* @param event The scroll event. * @param event The scroll event.
@@ -3169,7 +3187,7 @@
if (_scrollStopTimeoutId !== undefined) if (_scrollStopTimeoutId !== undefined)
clearTimeout(_scrollStopTimeoutId); clearTimeout(_scrollStopTimeoutId);
else { else {
if (_scrollbarsAutoHideScroll) if (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove)
refreshScrollbarsAutoHide(true); refreshScrollbarsAutoHide(true);
if (!nativeOverlayScrollbarsAreActive()) if (!nativeOverlayScrollbarsAreActive())
@@ -3199,7 +3217,7 @@
function onScrollStop() { function onScrollStop() {
clearTimeout(_scrollStopTimeoutId); clearTimeout(_scrollStopTimeoutId);
_scrollStopTimeoutId = undefined; _scrollStopTimeoutId = undefined;
if (_scrollbarsAutoHideScroll) if (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove)
refreshScrollbarsAutoHide(false); refreshScrollbarsAutoHide(false);
if (!nativeOverlayScrollbarsAreActive()) if (!nativeOverlayScrollbarsAreActive())
@@ -3534,7 +3552,7 @@
var classNameAllowedValues = ['*', null]; var classNameAllowedValues = ['*', null];
var overflowBehaviorAllowedValues = ['v-h:visible-hidden', 'v-s:visible-scroll', 's:scroll', 'h:hidden']; var overflowBehaviorAllowedValues = ['v-h:visible-hidden', 'v-s:visible-scroll', 's:scroll', 'h:hidden'];
var scrollbarsVisibilityAllowedValues = ['v:visible', 'h:hidden', 'a:auto']; var scrollbarsVisibilityAllowedValues = ['v:visible', 'h:hidden', 'a:auto'];
var scrollbarsAutoHideAllowedValues = ['n:never', 's:scroll', 'l:leave']; var scrollbarsAutoHideAllowedValues = ['n:never', 's:scroll', 'l:leave', 'm:move'];
var resizeAllowedValues = ['n:none', 'b:both', 'h:horizontal', 'v:vertical']; var resizeAllowedValues = ['n:none', 'b:both', 'h:horizontal', 'v:vertical'];
var strCallbacksDot = 'callbacks.'; var strCallbacksDot = 'callbacks.';
var strScrollbarsDot = _strScrollbar + 's.'; var strScrollbarsDot = _strScrollbar + 's.';
@@ -3899,6 +3917,7 @@
//scrollbars visibility //scrollbars visibility
_scrollbarsAutoHideNever = scrollbarsAutoHide === 'n'; _scrollbarsAutoHideNever = scrollbarsAutoHide === 'n';
_scrollbarsAutoHideScroll = scrollbarsAutoHide === 's'; _scrollbarsAutoHideScroll = scrollbarsAutoHide === 's';
_scrollbarsAutoHideMove = scrollbarsAutoHide === 'm';
_scrollbarsAutoHideLeave = scrollbarsAutoHide === 'l'; _scrollbarsAutoHideLeave = scrollbarsAutoHide === 'l';
//scrollbars autoHideDelay //scrollbars autoHideDelay
@@ -4050,7 +4069,7 @@
var isRTLLeft = _isRTL ? _strLeft : _strRight; var isRTLLeft = _isRTL ? _strLeft : _strRight;
var isRTLRight = _isRTL ? _strRight : _strLeft; var isRTLRight = _isRTL ? _strRight : _strLeft;
var hostElement = _hostElement[0]; var hostElement = _hostElement[0];
var paddingElement = _paddingElement[0]; var paddingElement = _paddingElement[0];
//detect width auto: //detect width auto:
var widthAutoResizeDetection = false; var widthAutoResizeDetection = false;
@@ -4236,7 +4255,12 @@
var strOverflowY = strOverflow + '-y'; var strOverflowY = strOverflow + '-y';
var strHidden = 'hidden'; var strHidden = 'hidden';
var strVisible = 'visible'; var strVisible = 'visible';
var hideOverflow4CorrectMeasuring = _restrictedMeasuring ? (_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y) || (_viewportSize.w < _nativeScrollbarMinSize.y || _viewportSize.h < _nativeScrollbarMinSize.x) : false;; //decide whether the content overflow must get hidden for correct overflow measuring, it MUST be always hidden if the height is auto
var hideOverflow4CorrectMeasuring = _restrictedMeasuring ?
(_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y) || //it must be hidden if native scrollbars are overlaid
(_viewportSize.w < _nativeScrollbarMinSize.y || _viewportSize.h < _nativeScrollbarMinSize.x) || //it must be hidden if host-element is too small
heightAuto //it must be hidden if height is auto
: heightAuto; //if there is not the restricted Measuring bug, it must be hidden if the height is auto
//Reset the viewport (very important for natively overlaid scrollbars and zoom change //Reset the viewport (very important for natively overlaid scrollbars and zoom change
var viewportElementResetCSS = {}; var viewportElementResetCSS = {};
@@ -4251,7 +4275,7 @@
//measure several sizes: //measure several sizes:
var contentMeasureElement = getContentMeasureElement(); var contentMeasureElement = getContentMeasureElement();
//in Firefox content element has to have overflow hidden, else element margins aren't calculated properly, this element prevents this bug, but only if scrollbars aren't overlaid //in Firefox content element has to have overflow hidden, else element margins aren't calculated properly, this element prevents this bug, but only if scrollbars aren't overlaid
var contentMeasureElementGuaranty = hideOverflow4CorrectMeasuring ? contentMeasureElement : _viewportElement[0]; var contentMeasureElementGuaranty = _restrictedMeasuring && !hideOverflow4CorrectMeasuring ? _viewportElement[0] : contentMeasureElement;
var clientSize = { var clientSize = {
w: contentMeasureElement[WORDING.cW], w: contentMeasureElement[WORDING.cW],
h: contentMeasureElement[WORDING.cH] h: contentMeasureElement[WORDING.cH]
@@ -4364,12 +4388,12 @@
}; };
hostSizeChanged = checkCacheDouble(hostSize, _hostSizeCache); hostSizeChanged = checkCacheDouble(hostSize, _hostSizeCache);
_hostSizeCache = hostSize; _hostSizeCache = hostSize;
//viewport size is padding container because it never has padding, margin and a border. //viewport size is padding container because it never has padding, margin and a border.
_viewportSize = { _viewportSize = {
w: paddingElement[WORDING.oW], w: paddingElement[WORDING.oW],
h: paddingElement[WORDING.oH] h: paddingElement[WORDING.oH]
}; };
var overflowBehaviorIsVS = { var overflowBehaviorIsVS = {
x: overflowBehavior.x === 'v-s', x: overflowBehavior.x === 'v-s',
@@ -4525,14 +4549,14 @@
viewportElementCSS[strOverflowY] = _strEmpty; viewportElementCSS[strOverflowY] = _strEmpty;
resetScrollbarHidingY(); resetScrollbarHidingY();
} }
// if the scroll container is too small and if there is any overflow with not overlay scrollbar, make viewport element greater in size (Firefox hide Scrollbars fix) // if the scroll container is too small and if there is any overflow with not overlay scrollbar, make viewport element greater in size (Firefox hide Scrollbars fix)
// because firefox starts hiding scrollbars on too small elements // because firefox starts hiding scrollbars on too small elements
// with this behavior the overflow calculation may be incorrect or the scrollbars would appear suddenly // with this behavior the overflow calculation may be incorrect or the scrollbars would appear suddenly
// https://bugzilla.mozilla.org/show_bug.cgi?id=292284 // https://bugzilla.mozilla.org/show_bug.cgi?id=292284
if ((_viewportSize.h < _nativeScrollbarMinSize.x || _viewportSize.w < _nativeScrollbarMinSize.y) if ((_viewportSize.h < _nativeScrollbarMinSize.x || _viewportSize.w < _nativeScrollbarMinSize.y)
&& ((hasOverflow.x && hideOverflow.x && !_nativeScrollbarIsOverlaid.x) || (hasOverflow.y && hideOverflow.y && !_nativeScrollbarIsOverlaid.y))) { && ((hasOverflow.x && hideOverflow.x && !_nativeScrollbarIsOverlaid.x) || (hasOverflow.y && hideOverflow.y && !_nativeScrollbarIsOverlaid.y))) {
viewportElementCSS[_strPaddingMinus + _strTop] = _nativeScrollbarMinSize.x; viewportElementCSS[_strPaddingMinus + _strTop] = _nativeScrollbarMinSize.x;
viewportElementCSS[_strMarginMinus + _strTop] = -_nativeScrollbarMinSize.x; viewportElementCSS[_strMarginMinus + _strTop] = -_nativeScrollbarMinSize.x;
@@ -4696,34 +4720,42 @@
//manage the scrollbars auto hide feature (auto hide them after specific actions) //manage the scrollbars auto hide feature (auto hide them after specific actions)
if (scrollbarsAutoHideChanged || ignoreOverlayScrollbarHidingChanged) { if (scrollbarsAutoHideChanged || ignoreOverlayScrollbarHidingChanged) {
var strMouseEnter = 'mouseenter'; var addMouseTouchEvents = function (move) {
var strMouseLeave = 'mouseleave';
var addLeaveEvents = function () {
if (_supportPassiveEvents) { if (_supportPassiveEvents) {
addPassiveEventListener(_hostElement, strMouseEnter, hostOnMouseEnter); if(move)
addPassiveEventListener(_hostElement, strMouseLeave, hostOnMouseLeave); addPassiveEventListener(_hostElement, _strMouseTouchMoveEvent, hostOnMouseMove);
else {
addPassiveEventListener(_hostElement, _strMouseTouchEnter, hostOnMouseEnter);
addPassiveEventListener(_hostElement, _strMouseTouchLeave, hostOnMouseLeave);
}
} }
else { else {
_hostElement.on(strMouseEnter, hostOnMouseEnter); if(move)
_hostElement.on(strMouseLeave, hostOnMouseLeave); _hostElement.on(_strMouseTouchMoveEvent, hostOnMouseMove);
else {
_hostElement.on(_strMouseTouchEnter, hostOnMouseEnter);
_hostElement.on(_strMouseTouchLeave, hostOnMouseLeave);
}
} }
}; };
var removeLeaveEvents = function () { var removeMouseTouchEvents = function () {
if (_supportPassiveEvents) { if (_supportPassiveEvents) {
removePassiveEventListener(_hostElement, strMouseEnter, hostOnMouseEnter); removePassiveEventListener(_hostElement, _strMouseTouchMoveEvent, hostOnMouseMove);
removePassiveEventListener(_hostElement, strMouseLeave, hostOnMouseLeave); removePassiveEventListener(_hostElement, _strMouseTouchEnter, hostOnMouseEnter);
removePassiveEventListener(_hostElement, _strMouseTouchLeave, hostOnMouseLeave);
} }
else { else {
_hostElement.off(strMouseEnter, hostOnMouseEnter); _hostElement.off(_strMouseTouchMoveEvent, hostOnMouseMove);
_hostElement.off(strMouseLeave, hostOnMouseLeave); _hostElement.off(_strMouseTouchEnter, hostOnMouseEnter);
_hostElement.off(_strMouseTouchLeave, hostOnMouseLeave);
} }
}; };
if (_scrollbarsAutoHideLeave) { if (_scrollbarsAutoHideLeave || _scrollbarsAutoHideMove) {
removeLeaveEvents(); removeMouseTouchEvents();
addLeaveEvents(); addMouseTouchEvents(_scrollbarsAutoHideMove);
} }
else { else {
removeLeaveEvents(); removeMouseTouchEvents();
} }
if (_scrollbarsAutoHideNever) if (_scrollbarsAutoHideNever)
@@ -4939,12 +4971,14 @@
_sizeAutoObserverElement.remove(); _sizeAutoObserverElement.remove();
if (_supportPassiveEvents) { if (_supportPassiveEvents) {
removePassiveEventListener(_hostElement, 'mouseenter', hostOnMouseEnter); removePassiveEventListener(_hostElement, _strMouseTouchMoveEvent, hostOnMouseMove);
removePassiveEventListener(_hostElement, 'mouseleave', hostOnMouseLeave); removePassiveEventListener(_hostElement, _strMouseTouchEnter, hostOnMouseEnter);
removePassiveEventListener(_hostElement, _strMouseTouchLeave, hostOnMouseLeave);
} }
else { else {
_hostElement.off('mouseenter', hostOnMouseEnter); _hostElement.off(_strMouseTouchMoveEvent, hostOnMouseMove);
_hostElement.off('mouseleave', hostOnMouseLeave); _hostElement.off(_strMouseTouchEnter, hostOnMouseEnter);
_hostElement.off(_strMouseTouchLeave, hostOnMouseLeave);
} }
_scrollbarHorizontalElement.remove(); _scrollbarHorizontalElement.remove();
@@ -5542,7 +5576,7 @@
_supportPassiveEvents = globals.supportPassiveEvents; _supportPassiveEvents = globals.supportPassiveEvents;
_supportResizeObserver = globals.supportResizeObserver; _supportResizeObserver = globals.supportResizeObserver;
_supportMutationObserver = globals.supportMutationObserver; _supportMutationObserver = globals.supportMutationObserver;
_restrictedMeasuring = globals.restrictedMeasuring; _restrictedMeasuring = globals.restrictedMeasuring;
_documentElement = helper(targetElement.ownerDocument); _documentElement = helper(targetElement.ownerDocument);
_windowElement = helper(_documentElement[0].defaultView || _documentElement[0].parentWindow); _windowElement = helper(_documentElement[0].defaultView || _documentElement[0].parentWindow);
_htmlElement = _documentElement.find('html').first(); _htmlElement = _documentElement.find('html').first();
@@ -5808,24 +5842,24 @@
_pluginGlobals.defaultOptions = helper.extend(true, { }, currDefaultOptions , newDefaultOptions); _pluginGlobals.defaultOptions = helper.extend(true, { }, currDefaultOptions , newDefaultOptions);
}; };
})(COMPATIBILITY, INSTANCES, HELPER, BYPROPERTYPATH); })(COMPATIBILITY, INSTANCES, HELPER, BYPROPERTYPATH);
var jQuery = window.jQuery; var jQuery = window.jQuery;
if(jQuery && jQuery.fn) { if(jQuery && jQuery.fn) {
/** /**
* The jQuery initialization interface. * The jQuery initialization interface.
* @param options The initial options for the construction of the plugin. To initialize the plugin, this option has to be a object! If it isn't a object, the instance(s) are returned and the plugin wont be initialized. * @param options The initial options for the construction of the plugin. To initialize the plugin, this option has to be a object! If it isn't a object, the instance(s) are returned and the plugin wont be initialized.
* @returns {*} After initialization it returns the jQuery element array, else it returns the instance(s) of the elements which are selected. * @returns {*} After initialization it returns the jQuery element array, else it returns the instance(s) of the elements which are selected.
*/ */
jQuery.fn.overlayScrollbars = function (options) { jQuery.fn.overlayScrollbars = function (options) {
var _elements = this; var _elements = this;
if(jQuery.isPlainObject(options)) { if(jQuery.isPlainObject(options)) {
jQuery.each(_elements, function() { window[PLUGINNAME](this, options); }); jQuery.each(_elements, function() { window[PLUGINNAME](this, options); });
return _elements; return _elements;
} }
else else
return window[PLUGINNAME](_elements, options); return window[PLUGINNAME](_elements, options);
}; };
} }
return window[PLUGINNAME]; return window[PLUGINNAME];
}))); })));
js/OverlayScrollbars.min.js
Vendored
+4 -4
View File
File diff suppressed because one or more lines are too long
js/jquery.overlayScrollbars.js
+124 -90
View File
@@ -2,13 +2,13 @@
* OverlayScrollbars * OverlayScrollbars
* https://github.com/KingSora/OverlayScrollbars * https://github.com/KingSora/OverlayScrollbars
* *
* Version: 1.3.0 * Version: 1.4.0
* *
* Copyright KingSora. * Copyright KingSora.
* https://github.com/KingSora * https://github.com/KingSora
* *
* Released under the MIT license. * Released under the MIT license.
* Date: 26.02.2018 * Date: 02.03.2018
*/ */
(function (global, factory) { (function (global, factory) {
@@ -435,7 +435,7 @@
}, },
scrollbars : { scrollbars : {
visibility : 'auto', //visible || hidden || auto || v || h || a visibility : 'auto', //visible || hidden || auto || v || h || a
autoHide : 'never', //never || scroll || leave || n || s || l autoHide : 'never', //never || scroll || leave || move || n || s || l || m
autoHideDelay : 800, //number autoHideDelay : 800, //number
dragScrolling : true, //true || false dragScrolling : true, //true || false
clickScrolling : false, //true || false clickScrolling : false, //true || false
@@ -486,7 +486,7 @@
var nativeScrollbarSize = (function() { var nativeScrollbarSize = (function() {
bodyElement.append(scrollbarDummyElement); bodyElement.append(scrollbarDummyElement);
var strOverflow = 'overflow'; var strOverflow = 'overflow';
var strHidden = 'hidden'; var strHidden = 'hidden';
var scrollbarDummyElement0 = scrollbarDummyElement[0]; var scrollbarDummyElement0 = scrollbarDummyElement[0];
var dummyContainerChild = helper(scrollbarDummyElement.children('div').first()); var dummyContainerChild = helper(scrollbarDummyElement.children('div').first());
var IEBUGFIX = scrollbarDummyElement0[WORDING.oH]; //IE9 causes a bug where offsetHeight is zero for no reason var IEBUGFIX = scrollbarDummyElement0[WORDING.oH]; //IE9 causes a bug where offsetHeight is zero for no reason
@@ -497,44 +497,44 @@
x: scrollbarDummyElement0[WORDING.oH] - scrollbarDummyElement0[WORDING.cH], x: scrollbarDummyElement0[WORDING.oH] - scrollbarDummyElement0[WORDING.cH],
y: scrollbarDummyElement0[WORDING.oW] - scrollbarDummyElement0[WORDING.cW] y: scrollbarDummyElement0[WORDING.oW] - scrollbarDummyElement0[WORDING.cW]
}; };
//https://bugzilla.mozilla.org/show_bug.cgi?id=1439305 //https://bugzilla.mozilla.org/show_bug.cgi?id=1439305
_base.restrictedMeasuring = (function() { _base.restrictedMeasuring = (function() {
scrollbarDummyElement.css(strOverflow, strHidden); scrollbarDummyElement.css(strOverflow, strHidden);
var scrollSize = { var scrollSize = {
w : scrollbarDummyElement0[WORDING.sW], w : scrollbarDummyElement0[WORDING.sW],
h : scrollbarDummyElement0[WORDING.sH] h : scrollbarDummyElement0[WORDING.sH]
}; };
scrollbarDummyElement.css(strOverflow, 'visible'); scrollbarDummyElement.css(strOverflow, 'visible');
var scrollSize2 = { var scrollSize2 = {
w : scrollbarDummyElement0[WORDING.sW], w : scrollbarDummyElement0[WORDING.sW],
h : scrollbarDummyElement0[WORDING.sH] h : scrollbarDummyElement0[WORDING.sH]
}; };
return (scrollSize.w - scrollSize2.w) !== 0 || (scrollSize.h - scrollSize2.h) !== 0; return (scrollSize.w - scrollSize2.w) !== 0 || (scrollSize.h - scrollSize2.h) !== 0;
})(); })();
_base.nativeScrollbarStyling = (function() { _base.nativeScrollbarStyling = (function() {
scrollbarDummyElement.addClass('os-viewport-native-scrollbars-invisible'); scrollbarDummyElement.addClass('os-viewport-native-scrollbars-invisible');
scrollbarDummyElement.css(strOverflow, strHidden).hide().css(strOverflow, 'scroll').show(); //fix opera bug: scrollbar styles will only appear if overflow value is scroll or auto during the activation of the style. scrollbarDummyElement.css(strOverflow, strHidden).hide().css(strOverflow, 'scroll').show(); //fix opera bug: scrollbar styles will only appear if overflow value is scroll or auto during the activation of the style.
return (scrollbarDummyElement0[WORDING.oH] - scrollbarDummyElement0[WORDING.cH]) === 0 && (scrollbarDummyElement0[WORDING.oW] - scrollbarDummyElement0[WORDING.cW]) === 0; return (scrollbarDummyElement0[WORDING.oH] - scrollbarDummyElement0[WORDING.cH]) === 0 && (scrollbarDummyElement0[WORDING.oW] - scrollbarDummyElement0[WORDING.cW]) === 0;
})(); })();
_base.rtlScrollBehavior = (function() { _base.rtlScrollBehavior = (function() {
scrollbarDummyElement.css({ 'overflow-y' : strHidden, 'direction' : 'rtl' }).scrollLeft(0); scrollbarDummyElement.css({ 'overflow-y' : strHidden, 'direction' : 'rtl' }).scrollLeft(0);
var dummyContainerOffset = scrollbarDummyElement.offset(); var dummyContainerOffset = scrollbarDummyElement.offset();
var dummyContainerChildOffset = dummyContainerChild.offset(); var dummyContainerChildOffset = dummyContainerChild.offset();
scrollbarDummyElement.scrollLeft(999); scrollbarDummyElement.scrollLeft(999);
var dummyContainerScrollOffsetAfterScroll = dummyContainerChild.offset(); var dummyContainerScrollOffsetAfterScroll = dummyContainerChild.offset();
return { return {
//origin direction = determines if the zero scroll position is on the left or right side //origin direction = determines if the zero scroll position is on the left or right side
//'i' means 'invert' (i === true means that the axis must be inverted to be correct) //'i' means 'invert' (i === true means that the axis must be inverted to be correct)
//true = on the left side //true = on the left side
//false = on the right side //false = on the right side
i : dummyContainerOffset.left === dummyContainerChildOffset.left, i : dummyContainerOffset.left === dummyContainerChildOffset.left,
//negative = determines if the maximum scroll is positive or negative //negative = determines if the maximum scroll is positive or negative
//'n' means 'negate' (n === true means that the axis must be negated to be correct) //'n' means 'negate' (n === true means that the axis must be negated to be correct)
//true = negative //true = negative
//false = positive //false = positive
n : dummyContainerChildOffset.left - dummyContainerScrollOffsetAfterScroll.left === 0 n : dummyContainerChildOffset.left - dummyContainerScrollOffsetAfterScroll.left === 0
}; };
})(); })();
scrollbarDummyElement.removeAttr(WORDING.s).remove(); scrollbarDummyElement.removeAttr(WORDING.s).remove();
return scrollbarSize; return scrollbarSize;
})(); })();
@@ -828,7 +828,7 @@
var _supportTransform; var _supportTransform;
var _supportPassiveEvents; var _supportPassiveEvents;
var _supportResizeObserver; var _supportResizeObserver;
var _restrictedMeasuring; var _restrictedMeasuring;
var _isBorderBox; var _isBorderBox;
var _paddingX; var _paddingX;
var _paddingY; var _paddingY;
@@ -875,6 +875,8 @@
var _strMouseTouchDownEvent = 'mousedown touchstart'; var _strMouseTouchDownEvent = 'mousedown touchstart';
var _strMouseTouchUpEvent = 'mouseup touchend'; var _strMouseTouchUpEvent = 'mouseup touchend';
var _strMouseTouchMoveEvent = 'mousemove touchmove'; var _strMouseTouchMoveEvent = 'mousemove touchmove';
var _strMouseTouchEnter = 'mouseenter';
var _strMouseTouchLeave = 'mouseleave';
var _strKeyDownEvent = 'keydown'; var _strKeyDownEvent = 'keydown';
var _strKeyUpEvent = 'keyup'; var _strKeyUpEvent = 'keyup';
var _strSelectStartEvent = 'selectstart'; var _strSelectStartEvent = 'selectstart';
@@ -1026,12 +1028,14 @@
//scrollbars: //scrollbars:
var _scrollbarsAutoHideTimeoutId; var _scrollbarsAutoHideTimeoutId;
var _scrollbarsAutoHideMoveTimeoutId;
var _scrollbarsAutoHideDelay; var _scrollbarsAutoHideDelay;
var _scrollbarsAutoHideNever; var _scrollbarsAutoHideNever;
var _scrollbarsAutoHideScroll; var _scrollbarsAutoHideScroll;
var _scrollbarsAutoHideMove;
var _scrollbarsAutoHideLeave; var _scrollbarsAutoHideLeave;
var _scrollbarsTouchSupport; var _scrollbarsTouchSupport;
var _scrollbarsAutoHideScrollAndHovered; var _scrollbarsAutoHideFlagScrollAndHovered;
//resize //resize
var _resizeReconnectMutationObserver; var _resizeReconnectMutationObserver;
@@ -1406,8 +1410,8 @@
* @param args The args with which the callback shall be called. * @param args The args with which the callback shall be called.
*/ */
function callCallback(callback, args) { function callCallback(callback, args) {
if(_initialized) if(_initialized)
callback.call(_base, args); callback.call(_base, args);
} }
/** /**
@@ -1783,11 +1787,11 @@
else { else {
var strActive = 'active'; var strActive = 'active';
var hide = function () { var hide = function () {
if (!_scrollbarsAutoHideScrollAndHovered) { if (!_scrollbarsAutoHideFlagScrollAndHovered) {
var anyActive = _scrollbarHorizontalHandleElement.hasClass(strActive) || _scrollbarVerticalHandleElement.hasClass(strActive); var anyActive = _scrollbarHorizontalHandleElement.hasClass(strActive) || _scrollbarVerticalHandleElement.hasClass(strActive);
if (!anyActive && (_scrollbarsAutoHideScroll || _scrollbarsAutoHideLeave)) if (!anyActive && (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove || _scrollbarsAutoHideLeave))
_scrollbarHorizontalElement.addClass(_classNameScrollbarAutoHidden); _scrollbarHorizontalElement.addClass(_classNameScrollbarAutoHidden);
if (!anyActive && (_scrollbarsAutoHideScroll || _scrollbarsAutoHideLeave)) if (!anyActive && (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove || _scrollbarsAutoHideLeave))
_scrollbarVerticalElement.addClass(_classNameScrollbarAutoHidden); _scrollbarVerticalElement.addClass(_classNameScrollbarAutoHidden);
} }
}; };
@@ -1808,7 +1812,6 @@
//get and apply intended handle length //get and apply intended handle length
var handleRatio = Math.min(1, (_hostSizeCache[scrollbarVars._wh] - (_paddingAbsoluteCache ? (isHorizontal ? _paddingX : _paddingY) : 0)) / _contentScrollSizeCache[scrollbarVars._wh]); var handleRatio = Math.min(1, (_hostSizeCache[scrollbarVars._wh] - (_paddingAbsoluteCache ? (isHorizontal ? _paddingX : _paddingY) : 0)) / _contentScrollSizeCache[scrollbarVars._wh]);
handleRatio = isNaN(handleRatio) ? 0 : handleRatio;
handleCSS[scrollbarVars.wh] = (Math.floor(handleRatio * 100 * 100000) / 100000) + "%"; //the last * 100000 / 100000 is for flooring to the 4th digit handleCSS[scrollbarVars.wh] = (Math.floor(handleRatio * 100 * 100000) / 100000) + "%"; //the last * 100000 / 100000 is for flooring to the 4th digit
if (!nativeOverlayScrollbarsAreActive()) if (!nativeOverlayScrollbarsAreActive())
@@ -2009,7 +2012,7 @@
event.clientY >= rect.top && event.clientY <= rect.bottom)) { event.clientY >= rect.top && event.clientY <= rect.bottom)) {
hostOnMouseLeave(); hostOnMouseLeave();
} }
if (_scrollbarsAutoHideScroll) if (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove)
refreshScrollbarsAutoHide(false); refreshScrollbarsAutoHide(false);
}; };
var documentKeyDown = function (event) { var documentKeyDown = function (event) {
@@ -2131,13 +2134,13 @@
compatibility.prvD(event); compatibility.prvD(event);
} }
}).hover(function () { //make sure both scrollbars will stay visible if one scrollbar is hovered if autoHide is "scroll". }).hover(function () { //make sure both scrollbars will stay visible if one scrollbar is hovered if autoHide is "scroll".
if (_scrollbarsAutoHideScroll) { if (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove) {
_scrollbarsAutoHideScrollAndHovered = true; _scrollbarsAutoHideFlagScrollAndHovered = true;
refreshScrollbarsAutoHide(true); refreshScrollbarsAutoHide(true);
} }
}, function () { }, function () {
if (_scrollbarsAutoHideScroll) { if (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove) {
_scrollbarsAutoHideScrollAndHovered = false; _scrollbarsAutoHideFlagScrollAndHovered = false;
refreshScrollbarsAutoHide(false); refreshScrollbarsAutoHide(false);
} }
}); });
@@ -2184,6 +2187,20 @@
refreshScrollbarsAutoHide(false); refreshScrollbarsAutoHide(false);
} }
/**
* The mouse leave event of the host element. This event is only needed for the autoHide feature.
*/
function hostOnMouseMove() {
if (_scrollbarsAutoHideMove) {
refreshScrollbarsAutoHide(true);
clearTimeout(_scrollbarsAutoHideMoveTimeoutId);
_scrollbarsAutoHideMoveTimeoutId = setTimeout(function () {
if (_scrollbarsAutoHideMove)
refreshScrollbarsAutoHide(false);
}, 100);
}
}
/** /**
* The scroll event of the viewport element. That is the main scroll event. It controls also the "scroll", "scrollStart" and "scrollStop" callbacks. * The scroll event of the viewport element. That is the main scroll event. It controls also the "scroll", "scrollStart" and "scrollStop" callbacks.
* @param event The scroll event. * @param event The scroll event.
@@ -2199,7 +2216,7 @@
if (_scrollStopTimeoutId !== undefined) if (_scrollStopTimeoutId !== undefined)
clearTimeout(_scrollStopTimeoutId); clearTimeout(_scrollStopTimeoutId);
else { else {
if (_scrollbarsAutoHideScroll) if (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove)
refreshScrollbarsAutoHide(true); refreshScrollbarsAutoHide(true);
if (!nativeOverlayScrollbarsAreActive()) if (!nativeOverlayScrollbarsAreActive())
@@ -2229,7 +2246,7 @@
function onScrollStop() { function onScrollStop() {
clearTimeout(_scrollStopTimeoutId); clearTimeout(_scrollStopTimeoutId);
_scrollStopTimeoutId = undefined; _scrollStopTimeoutId = undefined;
if (_scrollbarsAutoHideScroll) if (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove)
refreshScrollbarsAutoHide(false); refreshScrollbarsAutoHide(false);
if (!nativeOverlayScrollbarsAreActive()) if (!nativeOverlayScrollbarsAreActive())
@@ -2564,7 +2581,7 @@
var classNameAllowedValues = ['*', null]; var classNameAllowedValues = ['*', null];
var overflowBehaviorAllowedValues = ['v-h:visible-hidden', 'v-s:visible-scroll', 's:scroll', 'h:hidden']; var overflowBehaviorAllowedValues = ['v-h:visible-hidden', 'v-s:visible-scroll', 's:scroll', 'h:hidden'];
var scrollbarsVisibilityAllowedValues = ['v:visible', 'h:hidden', 'a:auto']; var scrollbarsVisibilityAllowedValues = ['v:visible', 'h:hidden', 'a:auto'];
var scrollbarsAutoHideAllowedValues = ['n:never', 's:scroll', 'l:leave']; var scrollbarsAutoHideAllowedValues = ['n:never', 's:scroll', 'l:leave', 'm:move'];
var resizeAllowedValues = ['n:none', 'b:both', 'h:horizontal', 'v:vertical']; var resizeAllowedValues = ['n:none', 'b:both', 'h:horizontal', 'v:vertical'];
var strCallbacksDot = 'callbacks.'; var strCallbacksDot = 'callbacks.';
var strScrollbarsDot = _strScrollbar + 's.'; var strScrollbarsDot = _strScrollbar + 's.';
@@ -2929,6 +2946,7 @@
//scrollbars visibility //scrollbars visibility
_scrollbarsAutoHideNever = scrollbarsAutoHide === 'n'; _scrollbarsAutoHideNever = scrollbarsAutoHide === 'n';
_scrollbarsAutoHideScroll = scrollbarsAutoHide === 's'; _scrollbarsAutoHideScroll = scrollbarsAutoHide === 's';
_scrollbarsAutoHideMove = scrollbarsAutoHide === 'm';
_scrollbarsAutoHideLeave = scrollbarsAutoHide === 'l'; _scrollbarsAutoHideLeave = scrollbarsAutoHide === 'l';
//scrollbars autoHideDelay //scrollbars autoHideDelay
@@ -3080,7 +3098,7 @@
var isRTLLeft = _isRTL ? _strLeft : _strRight; var isRTLLeft = _isRTL ? _strLeft : _strRight;
var isRTLRight = _isRTL ? _strRight : _strLeft; var isRTLRight = _isRTL ? _strRight : _strLeft;
var hostElement = _hostElement[0]; var hostElement = _hostElement[0];
var paddingElement = _paddingElement[0]; var paddingElement = _paddingElement[0];
//detect width auto: //detect width auto:
var widthAutoResizeDetection = false; var widthAutoResizeDetection = false;
@@ -3266,7 +3284,12 @@
var strOverflowY = strOverflow + '-y'; var strOverflowY = strOverflow + '-y';
var strHidden = 'hidden'; var strHidden = 'hidden';
var strVisible = 'visible'; var strVisible = 'visible';
var hideOverflow4CorrectMeasuring = _restrictedMeasuring ? (_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y) || (_viewportSize.w < _nativeScrollbarMinSize.y || _viewportSize.h < _nativeScrollbarMinSize.x) : false; //decide whether the content overflow must get hidden for correct overflow measuring, it MUST be always hidden if the height is auto
var hideOverflow4CorrectMeasuring = _restrictedMeasuring ?
(_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y) || //it must be hidden if native scrollbars are overlaid
(_viewportSize.w < _nativeScrollbarMinSize.y || _viewportSize.h < _nativeScrollbarMinSize.x) || //it must be hidden if host-element is too small
heightAuto //it must be hidden if height is auto
: heightAuto; //if there is not the restricted Measuring bug, it must be hidden if the height is auto
//Reset the viewport (very important for natively overlaid scrollbars and zoom change //Reset the viewport (very important for natively overlaid scrollbars and zoom change
var viewportElementResetCSS = {}; var viewportElementResetCSS = {};
@@ -3394,12 +3417,12 @@
}; };
hostSizeChanged = checkCacheDouble(hostSize, _hostSizeCache); hostSizeChanged = checkCacheDouble(hostSize, _hostSizeCache);
_hostSizeCache = hostSize; _hostSizeCache = hostSize;
//viewport size is padding container because it never has padding, margin and a border. //viewport size is padding container because it never has padding, margin and a border.
_viewportSize = { _viewportSize = {
w: paddingElement[WORDING.oW], w: paddingElement[WORDING.oW],
h: paddingElement[WORDING.oH] h: paddingElement[WORDING.oH]
}; };
var overflowBehaviorIsVS = { var overflowBehaviorIsVS = {
x: overflowBehavior.x === 'v-s', x: overflowBehavior.x === 'v-s',
@@ -3555,14 +3578,14 @@
viewportElementCSS[strOverflowY] = _strEmpty; viewportElementCSS[strOverflowY] = _strEmpty;
resetScrollbarHidingY(); resetScrollbarHidingY();
} }
// if the scroll container is too small and if there is any overflow with not overlay scrollbar, make viewport element greater in size (Firefox hide Scrollbars fix) // if the scroll container is too small and if there is any overflow with not overlay scrollbar, make viewport element greater in size (Firefox hide Scrollbars fix)
// because firefox starts hiding scrollbars on too small elements // because firefox starts hiding scrollbars on too small elements
// with this behavior the overflow calculation may be incorrect or the scrollbars would appear suddenly // with this behavior the overflow calculation may be incorrect or the scrollbars would appear suddenly
// https://bugzilla.mozilla.org/show_bug.cgi?id=292284 // https://bugzilla.mozilla.org/show_bug.cgi?id=292284
if ((_viewportSize.h < _nativeScrollbarMinSize.x || _viewportSize.w < _nativeScrollbarMinSize.y) if ((_viewportSize.h < _nativeScrollbarMinSize.x || _viewportSize.w < _nativeScrollbarMinSize.y)
&& ((hasOverflow.x && hideOverflow.x && !_nativeScrollbarIsOverlaid.x) || (hasOverflow.y && hideOverflow.y && !_nativeScrollbarIsOverlaid.y))) { && ((hasOverflow.x && hideOverflow.x && !_nativeScrollbarIsOverlaid.x) || (hasOverflow.y && hideOverflow.y && !_nativeScrollbarIsOverlaid.y))) {
viewportElementCSS[_strPaddingMinus + _strTop] = _nativeScrollbarMinSize.x; viewportElementCSS[_strPaddingMinus + _strTop] = _nativeScrollbarMinSize.x;
viewportElementCSS[_strMarginMinus + _strTop] = -_nativeScrollbarMinSize.x; viewportElementCSS[_strMarginMinus + _strTop] = -_nativeScrollbarMinSize.x;
@@ -3726,34 +3749,42 @@
//manage the scrollbars auto hide feature (auto hide them after specific actions) //manage the scrollbars auto hide feature (auto hide them after specific actions)
if (scrollbarsAutoHideChanged || ignoreOverlayScrollbarHidingChanged) { if (scrollbarsAutoHideChanged || ignoreOverlayScrollbarHidingChanged) {
var strMouseEnter = 'mouseenter'; var addMouseTouchEvents = function (move) {
var strMouseLeave = 'mouseleave';
var addLeaveEvents = function () {
if (_supportPassiveEvents) { if (_supportPassiveEvents) {
addPassiveEventListener(_hostElement, strMouseEnter, hostOnMouseEnter); if(move)
addPassiveEventListener(_hostElement, strMouseLeave, hostOnMouseLeave); addPassiveEventListener(_hostElement, _strMouseTouchMoveEvent, hostOnMouseMove);
else {
addPassiveEventListener(_hostElement, _strMouseTouchEnter, hostOnMouseEnter);
addPassiveEventListener(_hostElement, _strMouseTouchLeave, hostOnMouseLeave);
}
} }
else { else {
_hostElement.on(strMouseEnter, hostOnMouseEnter); if(move)
_hostElement.on(strMouseLeave, hostOnMouseLeave); _hostElement.on(_strMouseTouchMoveEvent, hostOnMouseMove);
else {
_hostElement.on(_strMouseTouchEnter, hostOnMouseEnter);
_hostElement.on(_strMouseTouchLeave, hostOnMouseLeave);
}
} }
}; };
var removeLeaveEvents = function () { var removeMouseTouchEvents = function () {
if (_supportPassiveEvents) { if (_supportPassiveEvents) {
removePassiveEventListener(_hostElement, strMouseEnter, hostOnMouseEnter); removePassiveEventListener(_hostElement, _strMouseTouchMoveEvent, hostOnMouseMove);
removePassiveEventListener(_hostElement, strMouseLeave, hostOnMouseLeave); removePassiveEventListener(_hostElement, _strMouseTouchEnter, hostOnMouseEnter);
removePassiveEventListener(_hostElement, _strMouseTouchLeave, hostOnMouseLeave);
} }
else { else {
_hostElement.off(strMouseEnter, hostOnMouseEnter); _hostElement.off(_strMouseTouchMoveEvent, hostOnMouseMove);
_hostElement.off(strMouseLeave, hostOnMouseLeave); _hostElement.off(_strMouseTouchEnter, hostOnMouseEnter);
_hostElement.off(_strMouseTouchLeave, hostOnMouseLeave);
} }
}; };
if (_scrollbarsAutoHideLeave) { if (_scrollbarsAutoHideLeave || _scrollbarsAutoHideMove) {
removeLeaveEvents(); removeMouseTouchEvents();
addLeaveEvents(); addMouseTouchEvents(_scrollbarsAutoHideMove);
} }
else { else {
removeLeaveEvents(); removeMouseTouchEvents();
} }
if (_scrollbarsAutoHideNever) if (_scrollbarsAutoHideNever)
@@ -3969,12 +4000,14 @@
_sizeAutoObserverElement.remove(); _sizeAutoObserverElement.remove();
if (_supportPassiveEvents) { if (_supportPassiveEvents) {
removePassiveEventListener(_hostElement, 'mouseenter', hostOnMouseEnter); removePassiveEventListener(_hostElement, _strMouseTouchMoveEvent, hostOnMouseMove);
removePassiveEventListener(_hostElement, 'mouseleave', hostOnMouseLeave); removePassiveEventListener(_hostElement, _strMouseTouchEnter, hostOnMouseEnter);
removePassiveEventListener(_hostElement, _strMouseTouchLeave, hostOnMouseLeave);
} }
else { else {
_hostElement.off('mouseenter', hostOnMouseEnter); _hostElement.off(_strMouseTouchMoveEvent, hostOnMouseMove);
_hostElement.off('mouseleave', hostOnMouseLeave); _hostElement.off(_strMouseTouchEnter, hostOnMouseEnter);
_hostElement.off(_strMouseTouchLeave, hostOnMouseLeave);
} }
_scrollbarHorizontalElement.remove(); _scrollbarHorizontalElement.remove();
@@ -4572,7 +4605,7 @@
_supportPassiveEvents = globals.supportPassiveEvents; _supportPassiveEvents = globals.supportPassiveEvents;
_supportResizeObserver = globals.supportResizeObserver; _supportResizeObserver = globals.supportResizeObserver;
_supportMutationObserver = globals.supportMutationObserver; _supportMutationObserver = globals.supportMutationObserver;
_restrictedMeasuring = globals.restrictedMeasuring; _restrictedMeasuring = globals.restrictedMeasuring;
_documentElement = helper(targetElement.ownerDocument); _documentElement = helper(targetElement.ownerDocument);
_windowElement = helper(_documentElement[0].defaultView || _documentElement[0].parentWindow); _windowElement = helper(_documentElement[0].defaultView || _documentElement[0].parentWindow);
_htmlElement = _documentElement.find('html').first(); _htmlElement = _documentElement.find('html').first();
@@ -4838,5 +4871,6 @@
_pluginGlobals.defaultOptions = helper.extend(true, { }, currDefaultOptions , newDefaultOptions); _pluginGlobals.defaultOptions = helper.extend(true, { }, currDefaultOptions , newDefaultOptions);
}; };
})(COMPATIBILITY, INSTANCES, HELPER, BYPROPERTYPATH); })(COMPATIBILITY, INSTANCES, HELPER, BYPROPERTYPATH);
return window[PLUGINNAME]; return window[PLUGINNAME];
}))); })));
js/jquery.overlayScrollbars.min.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "overlayscrollbars", "name": "overlayscrollbars",
"version": "1.3.0", "version": "1.4.0",
"description": "A javascript scrollbar plugin which hides the native scrollbars and provides custom styleable overlay scrollbars, but keeps the native functionality and feeling.", "description": "A javascript scrollbar plugin which hides the native scrollbars and provides custom styleable overlay scrollbars, but keeps the native functionality and feeling.",
"keywords" : [ "keywords" : [
"overlayscrollbars", "overlayscrollbars",