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

version 1.6.1

Browse Source
This commit is contained in:
Rene
2018-12-16 21:12:31 +01:00
parent 7c473de528
commit 8acb159324
7 changed files with 231 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/OverlayScrollbars.css
+66 -22
View File
@@ -2,13 +2,13 @@
* OverlayScrollbars * OverlayScrollbars
* https://github.com/KingSora/OverlayScrollbars * https://github.com/KingSora/OverlayScrollbars
* *
* Version: 1.6.0 * Version: 1.6.1
* *
* Copyright KingSora. * Copyright KingSora.
* https://github.com/KingSora * https://github.com/KingSora
* *
* Released under the MIT license. * Released under the MIT license.
* Date: 02.12.2018 * Date: 16.12.2018
*/ */
/* /*
@@ -38,35 +38,51 @@ body.os-dragging * {
.os-host-textarea { .os-host-textarea {
position: relative; position: relative;
overflow: visible !important; overflow: visible !important;
flex-direction: column; -webkit-box-orient: vertical;
flex-wrap: nowrap; -webkit-box-direction: normal;
justify-content: flex-start; -ms-flex-direction: column;
align-content: flex-start; flex-direction: column;
align-items: flex-start; -ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start;
} }
.os-host-flexbox { .os-host-flexbox {
overflow: hidden !important; overflow: hidden !important;
display: flex; display: -webkit-box;
} display: -ms-flexbox;
.os-host-flexbox > .os-padding > .os-viewport > .os-content {
display: flex; display: flex;
} }
.os-host-flexbox > .os-size-auto-observer { .os-host-flexbox > .os-size-auto-observer {
height: inherit !important; height: inherit !important;
} }
.os-host-flexbox > .os-content-glue { .os-host-flexbox > .os-content-glue {
flex-grow: 1; -webkit-box-flex: 1;
flex-shrink: 0; -ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 0;
flex-shrink: 0;
} }
.os-host-flexbox > .os-size-auto-observer, .os-host-flexbox > .os-size-auto-observer,
.os-host-flexbox > .os-content-glue { .os-host-flexbox > .os-content-glue {
min-height: 0; min-height: 0;
min-width: 0; min-width: 0;
flex-grow: 0; -webkit-box-flex: 0;
flex-shrink: 1; -ms-flex-positive: 0;
flex-basis: auto; flex-grow: 0;
-ms-flex-negative: 1;
flex-shrink: 1;
-ms-flex-preferred-size: auto;
flex-basis: auto;
} }
#hs-dummy-scrollbar-size { #os-dummy-scrollbar-size {
position: fixed; position: fixed;
opacity: 0; opacity: 0;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
@@ -75,13 +91,18 @@ body.os-dragging * {
height: 500px; height: 500px;
width: 500px; width: 500px;
} }
#hs-dummy-scrollbar-size, #os-dummy-scrollbar-size > * {
width: 200%;
height: 200%;
margin: 10px 0;
}
#os-dummy-scrollbar-size,
.os-viewport { .os-viewport {
-ms-overflow-style: scrollbar !important; -ms-overflow-style: scrollbar !important;
} }
.os-viewport-native-scrollbars-invisible#hs-dummy-scrollbar-size::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar,
.os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar,
.os-viewport-native-scrollbars-invisible#hs-dummy-scrollbar-size::-webkit-scrollbar-corner, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner,
.os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner { .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner {
display: none !important; display: none !important;
width: 0px !important; width: 0px !important;
@@ -90,12 +111,14 @@ body.os-dragging * {
background: transparent !important; background: transparent !important;
} }
.os-content-glue { .os-content-glue {
box-sizing: inherit;
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
pointer-events: none; pointer-events: none;
} }
.os-padding { .os-padding {
box-sizing: inherit;
direction: inherit; direction: inherit;
position: absolute; position: absolute;
overflow: visible; overflow: visible;
@@ -116,6 +139,7 @@ body.os-dragging * {
direction: inherit !important; direction: inherit !important;
box-sizing: inherit !important; box-sizing: inherit !important;
resize: none !important; resize: none !important;
outline: none !important;
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
top: 0; top: 0;
@@ -126,6 +150,21 @@ body.os-dragging * {
margin: 0; margin: 0;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.os-viewport-restricted:after {
content: '';
display: block;
width: auto;
height: 1px;
overflow: hidden;
pointer-events: none;
-webkit-transform: scale(0.0001);
transform: scale(0.0001);
font-size: 0 !important;
line-height: 0 !important;
margin: -1px 0 0 0 !important;
padding: 0 !important;
border: 0 !important;
}
.os-content-arrange { .os-content-arrange {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
@@ -145,6 +184,7 @@ body.os-dragging * {
visibility: visible; visibility: visible;
} }
.os-content > .os-textarea { .os-content > .os-textarea {
box-sizing: border-box !important;
direction: inherit !important; direction: inherit !important;
float: none !important; float: none !important;
margin: 0 !important; margin: 0 !important;
@@ -244,9 +284,13 @@ object.os-resize-observer {
padding: 0; padding: 0;
margin: 0; margin: 0;
pointer-events: none; pointer-events: none;
flex-grow: inherit; -webkit-box-flex: inherit;
flex-shrink: 0; -ms-flex-positive: inherit;
flex-basis: 0; flex-grow: inherit;
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
} }
.os-size-auto-observer > .os-resize-observer { .os-size-auto-observer > .os-resize-observer {
width: 1000%; width: 1000%;
css/OverlayScrollbars.min.css
Vendored
+4 -4
View File
File diff suppressed because one or more lines are too long
js/OverlayScrollbars.js
+77 -49
View File
@@ -2,13 +2,13 @@
* OverlayScrollbars * OverlayScrollbars
* https://github.com/KingSora/OverlayScrollbars * https://github.com/KingSora/OverlayScrollbars
* *
* Version: 1.6.0 * Version: 1.6.1
* *
* Copyright KingSora. * Copyright KingSora.
* https://github.com/KingSora * https://github.com/KingSora
* *
* Released under the MIT license. * Released under the MIT license.
* Date: 02.12.2018 * Date: 16.12.2018
*/ */
(function (global, factory) { (function (global, factory) {
@@ -107,7 +107,7 @@
* @returns {number} The current time. * @returns {number} The current time.
*/ */
now: function() { now: function() {
return Date.now() || new Date().getTime(); return Date.now && Date.now() || new Date().getTime();
}, },
/** /**
@@ -1599,7 +1599,7 @@
var strHidden = 'hidden'; var strHidden = 'hidden';
var strScroll = 'scroll'; var strScroll = 'scroll';
var bodyElement = FRAMEWORK('body'); var bodyElement = FRAMEWORK('body');
var scrollbarDummyElement = FRAMEWORK('<div id="hs-dummy-scrollbar-size"><div style="height: 200%; width: 200%; margin: 10px 0;"></div></div>'); var scrollbarDummyElement = FRAMEWORK('<div id="os-dummy-scrollbar-size"><div></div></div>');
var scrollbarDummyElement0 = scrollbarDummyElement[0]; var scrollbarDummyElement0 = scrollbarDummyElement[0];
var dummyContainerChild = FRAMEWORK(scrollbarDummyElement.children('div').eq(0)); var dummyContainerChild = FRAMEWORK(scrollbarDummyElement.children('div').eq(0));
@@ -2942,8 +2942,8 @@
return; return;
var wrapAttrOff = !_textareaAutoWrappingCache; var wrapAttrOff = !_textareaAutoWrappingCache;
var minWidth = _viewportSize.w - (!_isBorderBox && !_paddingAbsoluteCache && _widthAutoCache ? _paddingY + _borderY : 0); var minWidth = _viewportSize.w /* - (!_isBorderBox && !_paddingAbsoluteCache && _widthAutoCache ? _paddingY + _borderY : 0) */;
var minHeight = _viewportSize.h - (!_isBorderBox && !_paddingAbsoluteCache && _heightAutoCache ? _paddingY + _borderY : 0); var minHeight = _viewportSize.h /* - (!_isBorderBox && !_paddingAbsoluteCache && _heightAutoCache ? _paddingY + _borderY : 0) */;
var css = { }; var css = { };
var doMeasure = _widthAutoCache || wrapAttrOff; var doMeasure = _widthAutoCache || wrapAttrOff;
var measureElement = _targetElement[0]; var measureElement = _targetElement[0];
@@ -2959,29 +2959,32 @@
//set width auto //set width auto
css[_strWidth] = _strAuto; css[_strWidth] = _strAuto;
_targetElement.css(css); _targetElement.css(css);
//measure width //measure width
origWidth = measureElement[LEXICON.oW]; origWidth = measureElement[LEXICON.oW];
width = doMeasure ? MATH.max(origWidth, measureElement[LEXICON.sW] - 1) : 1; width = doMeasure ? MATH.max(origWidth, measureElement[LEXICON.sW] - 1) : 1;
width += (_widthAutoCache ? _marginX + (!_isBorderBox ? wrapAttrOff ? 0 : _paddingX + _borderX : 0) : 0); /*width += (_widthAutoCache ? _marginX + (!_isBorderBox ? wrapAttrOff ? 0 : _paddingX + _borderX : 0) : 0);*/
//set measured width and height auto //set measured width
css[_strWidth] = _widthAutoCache ? width : _strHundredPercent; css[_strWidth] = _widthAutoCache ? _strAuto /*width*/ : _strHundredPercent;
css[_strHeight] = _strAuto; //_strAuto css[_strMinMinus + _strWidth] = _strHundredPercent;
//set height auto
css[_strHeight] = _strAuto;
_targetElement.css(css); _targetElement.css(css);
//measure height //measure height
origHeight = measureElement[LEXICON.oH]; origHeight = measureElement[LEXICON.oH];
height = MATH.max(origHeight, measureElement[LEXICON.sH] - 1); height = MATH.max(origHeight, measureElement[LEXICON.sH] - 1);
//append correct size values //append correct size values
css[_strWidth] = width; css[_strWidth] = width;
css[_strHeight] = height; css[_strHeight] = height;
_textareaCoverElement.css(css); _textareaCoverElement.css(css);
//apply min width / min height to prevent textarea collapsing //apply min width / min height to prevent textarea collapsing
css[_strMinMinus + _strWidth] = minWidth + (!_isBorderBox && _widthAutoCache ? _paddingX + _borderX : 0); css[_strMinMinus + _strWidth] = minWidth /*+ (!_isBorderBox && _widthAutoCache ? _paddingX + _borderX : 0)*/;
css[_strMinMinus + _strHeight] = minHeight + (!_isBorderBox && _heightAutoCache ? _paddingY + _borderY : 0); css[_strMinMinus + _strHeight] = minHeight /*+ (!_isBorderBox && _heightAutoCache ? _paddingY + _borderY : 0)*/;
_targetElement.css(css); _targetElement.css(css);
return { return {
@@ -3481,15 +3484,16 @@
var strOverflowY = strOverflow + '-y'; var strOverflowY = strOverflow + '-y';
var strHidden = 'hidden'; var strHidden = 'hidden';
var strVisible = 'visible'; var strVisible = 'visible';
//decide whether the content overflow must get hidden for correct overflow measuring, it MUST be always hidden if the height is auto //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 ? var hideOverflow4CorrectMeasuring = _restrictedMeasuring ?
(_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y) || //it must be hidden if native scrollbars are overlaid (_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 (_viewportSize.w < _nativeScrollbarMinSize.y || _viewportSize.h < _nativeScrollbarMinSize.x) || //it must be hidden if host-element is too small
heightAuto || displayIsHiddenChanged //it must be hidden if height is auto or display was change heightAuto || displayIsHiddenChanged //it must be hidden if height is auto or display was change
: heightAuto; //if there is not the restricted Measuring bug, it must be hidden if the 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 = {}; //don't change the overflow prop as it is very expensive and affects performance !A LOT!
var viewportElementResetCSS = { };
var resetXTmp = _hasOverflowCache.y && _hideOverflowCache.ys && !ignoreOverlayScrollbarHiding ? (_nativeScrollbarIsOverlaid.y ? _viewportElement.css(isRTLLeft) : -_nativeScrollbarSize.y) : 0; var resetXTmp = _hasOverflowCache.y && _hideOverflowCache.ys && !ignoreOverlayScrollbarHiding ? (_nativeScrollbarIsOverlaid.y ? _viewportElement.css(isRTLLeft) : -_nativeScrollbarSize.y) : 0;
var resetBottomTmp = _hasOverflowCache.x && _hideOverflowCache.xs && !ignoreOverlayScrollbarHiding ? (_nativeScrollbarIsOverlaid.x ? _viewportElement.css(_strBottom) : -_nativeScrollbarSize.x) : 0; var resetBottomTmp = _hasOverflowCache.x && _hideOverflowCache.xs && !ignoreOverlayScrollbarHiding ? (_nativeScrollbarIsOverlaid.x ? _viewportElement.css(_strBottom) : -_nativeScrollbarSize.x) : 0;
setTopRightBottomLeft(viewportElementResetCSS, _strEmpty); setTopRightBottomLeft(viewportElementResetCSS, _strEmpty);
@@ -3525,7 +3529,7 @@
//has to be clientSize because offsetSize respect borders. //has to be clientSize because offsetSize respect borders.
var hostSize = getHostSize(); var hostSize = getHostSize();
var contentGlueSize = { var contentGlueSize = {
w: MATH.max(contentClientSize.w + padding.ax, hostSize.w - _paddingX) - (textareaDynWidth ? (_isTextarea && widthAuto ? _marginX + (!_isBorderBox ? _paddingX + _borderX : 0) : 0) : 0), w: MATH.max(contentClientSize.w + padding.ax, hostSize.w - _paddingX) /* - (textareaDynWidth ? (_isTextarea && widthAuto ? _marginX + (!_isBorderBox ? _paddingX + _borderX : 0) : 0) : 0) */,
h: MATH.max(contentClientSize.h + padding.ay, hostSize.h - _paddingY) h: MATH.max(contentClientSize.h + padding.ay, hostSize.h - _paddingY)
}; };
contentGlueSize.c = checkCacheDouble(contentGlueSize, _contentGlueSizeCache, force); contentGlueSize.c = checkCacheDouble(contentGlueSize, _contentGlueSizeCache, force);
@@ -3540,7 +3544,7 @@
} }
var maxWidth = contentGlueElementCSS[_strWidth] + (_isBorderBox ? _borderX : -_paddingX); var maxWidth = contentGlueElementCSS[_strWidth] + (_isBorderBox ? _borderX : -_paddingX);
var maxHeight = contentGlueElementCSS[_strHeight] + (_isBorderBox ? _borderY : -_paddingX); var maxHeight = contentGlueElementCSS[_strHeight] + (_isBorderBox ? _borderY : -_paddingY);
var textareaCoverCSS = {}; var textareaCoverCSS = {};
//make contentGlue size -1 if element is not auto sized, to make sure that a resize event happens when the element shrinks //make contentGlue size -1 if element is not auto sized, to make sure that a resize event happens when the element shrinks
@@ -3550,9 +3554,9 @@
contentGlueElementCSS[_strHeight] = hostSize.h - (_isBorderBox ? 0 : _paddingY + _borderY) - 1 - _marginY; contentGlueElementCSS[_strHeight] = hostSize.h - (_isBorderBox ? 0 : _paddingY + _borderY) - 1 - _marginY;
//if size is auto and host is same size as max size, make content glue size +1 to make sure size changes will be detected //if size is auto and host is same size as max size, make content glue size +1 to make sure size changes will be detected
if (cssMaxValue.cw && cssMaxValue.iw === maxWidth) if (widthAuto && cssMaxValue.cw && cssMaxValue.iw === maxWidth)
contentGlueElementCSS[_strWidth] = maxWidth + (_isBorderBox ? 0 : _paddingX) + 1; contentGlueElementCSS[_strWidth] = maxWidth + (_isBorderBox ? 0 : _paddingX) + 1;
if (cssMaxValue.ch && cssMaxValue.ih === maxHeight) if (heightAuto && cssMaxValue.ch && cssMaxValue.ih === maxHeight)
contentGlueElementCSS[_strHeight] = maxHeight + (_isBorderBox ? 0 : _paddingY) + 1; contentGlueElementCSS[_strHeight] = maxHeight + (_isBorderBox ? 0 : _paddingY) + 1;
//if size is auto and host is smaller than size as min size, make content glue size -1 to make sure size changes will be detected (this is only needed if padding is 0) //if size is auto and host is smaller than size as min size, make content glue size -1 to make sure size changes will be detected (this is only needed if padding is 0)
@@ -3567,7 +3571,7 @@
contentGlueElementCSS[_strHeight] -= 1; contentGlueElementCSS[_strHeight] -= 1;
} }
//make sure content glue size at least 1 //make sure content glue size is at least 1
if (contentClientSize.h > 0) { if (contentClientSize.h > 0) {
contentGlueElementCSS[_strWidth] = MATH.max(1, contentGlueElementCSS[_strWidth]); contentGlueElementCSS[_strWidth] = MATH.max(1, contentGlueElementCSS[_strWidth]);
contentGlueElementCSS[_strHeight] = MATH.max(1, contentGlueElementCSS[_strHeight]); contentGlueElementCSS[_strHeight] = MATH.max(1, contentGlueElementCSS[_strHeight]);
@@ -3954,6 +3958,8 @@
refreshScrollbarsInteractive(false, scrollbarsDragScrolling); refreshScrollbarsInteractive(false, scrollbarsDragScrolling);
//handle scroll //handle scroll
var textareaScrollX;
var textareaScrollY;
if (_isTextarea && contentSizeChanged) { if (_isTextarea && contentSizeChanged) {
var textareaInfo = getTextareaInfo(); var textareaInfo = getTextareaInfo();
if (textareaInfo) { if (textareaInfo) {
@@ -3966,32 +3972,34 @@
var cursorPos = textareaInfo.p; var cursorPos = textareaInfo.p;
var cursorMax = textareaInfo.m; var cursorMax = textareaInfo.m;
var cursorIsLastPosition = (cursorPos >= cursorMax && _textareaHasFocus); var cursorIsLastPosition = (cursorPos >= cursorMax && _textareaHasFocus);
var doScroll = { var textareaScrollAmount = {
x: (!textareaAutoWrapping && (cursorCol === lastCol && cursorRow === widestRow)) ? _overflowAmountCache.x : -1, x: (!textareaAutoWrapping && (cursorCol === lastCol && cursorRow === widestRow)) ? _overflowAmountCache.x : -1,
y: (textareaAutoWrapping ? cursorIsLastPosition || textareaRowsChanged && (previousOverflow !== undefined ? (currScroll.t === previousOverflow.y) : false) : (cursorIsLastPosition || textareaRowsChanged) && cursorRow === lastRow) ? _overflowAmountCache.y : -1 y: (textareaAutoWrapping ? cursorIsLastPosition || textareaRowsChanged && (previousOverflow !== undefined ? (currScroll.t === previousOverflow.y) : false) : (cursorIsLastPosition || textareaRowsChanged) && cursorRow === lastRow) ? _overflowAmountCache.y : -1
}; };
var doScrollX = doScroll.x > -1; textareaScrollX = textareaScrollAmount.x > -1;
var doScrollY = doScroll.y > -1; textareaScrollY = textareaScrollAmount.y > -1;
if (doScrollX || doScrollY) { if (textareaScrollY)
if (doScrollY) _viewportElement[_strScrollTop](textareaScrollAmount.y);
_viewportElement[_strScrollTop](doScroll.y); if (textareaScrollX) {
if (doScrollX) { if (_isRTL && _normalizeRTLCache && _rtlScrollBehavior.i)
if (_isRTL && _normalizeRTLCache && _rtlScrollBehavior.i) _viewportElement[_strScrollLeft](0); //if inverted, scroll to 0 -> normalized this means to max scroll offset.
_viewportElement[_strScrollLeft](0); //if inverted, scroll to 0 -> normalized this means to max scroll offset. else
else _viewportElement[_strScrollLeft](textareaScrollAmount.x);
_viewportElement[_strScrollLeft](doScroll.x);
}
} }
} }
_textareaInfoCache = textareaInfo; _textareaInfoCache = textareaInfo;
} }
else if (!_isTextarea) { if (_isRTL && _rtlScrollBehavior.i && _nativeScrollbarIsOverlaid.y && hasOverflow.x && _normalizeRTLCache)
if (_isRTL && _rtlScrollBehavior.i && _nativeScrollbarIsOverlaid.y && hasOverflow.x && _normalizeRTLCache) currScroll.l += _contentBorderSize.w || 0;
currScroll.l += _contentBorderSize.w || 0; if(!textareaScrollX)
_viewportElement[_strScrollLeft](currScroll.l); _viewportElement[_strScrollLeft](currScroll.l);
if(!textareaScrollY)
_viewportElement[_strScrollTop](currScroll.t); _viewportElement[_strScrollTop](currScroll.t);
} if(widthAuto)
_hostElement[_strScrollLeft](0);
if(heightAuto)
_hostElement[_strScrollTop](0);
if (cssDirectionChanged) { if (cssDirectionChanged) {
dispatchCallback("onDirectionChanged", { dispatchCallback("onDirectionChanged", {
@@ -5985,9 +5993,24 @@
//create mutation observers //create mutation observers
createMutationObservers(); createMutationObservers();
//apply the body scroll to handle it right in the update method if(_isBody) {
if(_isBody) //apply the body scroll to handle it right in the update method
_viewportElement[_strScrollLeft](initBodyScroll.l)[_strScrollTop](initBodyScroll.t); _viewportElement[_strScrollLeft](initBodyScroll.l)[_strScrollTop](initBodyScroll.t);
//set the focus on the viewport element so you dont have to click on the page to use keyboard keys (up / down / space) for scrolling
if(document.activeElement == targetElement && _viewportElement[0].focus) {
//set a tabindex to make the viewportElement focusable
_viewportElement.attr('tabindex', '-1');
_viewportElement[0].focus();
/* the tabindex has to be removed due to;
* If you set the tabindex attribute on an <div>, then its child content cannot be scrolled with the arrow keys unless you set tabindex on the content, too
* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
*/
_viewportElement.one(_strMouseTouchDownEvent, function() {
_viewportElement.removeAttr('tabindex');
});
}
}
//build resize observer for the host element //build resize observer for the host element
addResizeObserver(_sizeObserverElement, hostOnResized); addResizeObserver(_sizeObserverElement, hostOnResized);
@@ -6008,16 +6031,16 @@
if(type(extensions) == TYPES.s) if(type(extensions) == TYPES.s)
extensions = [ extensions ]; extensions = [ extensions ];
if(COMPATIBILITY.isA(extensions)) if(COMPATIBILITY.isA(extensions))
FRAMEWORK.each(extensions, function () {_base.addExt(this); }); FRAMEWORK.each(extensions, function (index, value) {_base.addExt(value); });
else if(FRAMEWORK.isPlainObject(extensions)) else if(FRAMEWORK.isPlainObject(extensions))
FRAMEWORK.each(extensions, function (key, value) { _base.addExt(key, value); }); FRAMEWORK.each(extensions, function (key, value) { _base.addExt(key, value); });
//add the transition class for transitions AFTER the first update & AFTER the applied extensions (for preventing unwanted transitions) //add the transition class for transitions AFTER the first update & AFTER the applied extensions (for preventing unwanted transitions)
setTimeout(function () { setTimeout(function () {
if (_supportTransition && !_destroyed) if (_supportTransition && !_destroyed)
addClass(_hostElement, _classNameHostTransition) addClass(_hostElement, _classNameHostTransition);
}, 333); }, 333);
return _initialized; return _initialized;
} }
@@ -6038,7 +6061,16 @@
window[PLUGINNAME] = function(pluginTargetElements, options, extensions) { window[PLUGINNAME] = function(pluginTargetElements, options, extensions) {
if(arguments.length === 0) if(arguments.length === 0)
return this; return this;
var arr = [ ];
var optsIsPlainObj = FRAMEWORK.isPlainObject(options);
var inst;
var result;
//pluginTargetElements is null or undefined
if(!pluginTargetElements)
return optsIsPlainObj || !options ? result : arr;
/* /*
pluginTargetElements will be converted to: pluginTargetElements will be converted to:
1. A jQueryElement Array 1. A jQueryElement Array
@@ -6049,12 +6081,8 @@
pluginTargetElements = pluginTargetElements.length != undefined ? pluginTargetElements : [ pluginTargetElements[0] || pluginTargetElements ]; pluginTargetElements = pluginTargetElements.length != undefined ? pluginTargetElements : [ pluginTargetElements[0] || pluginTargetElements ];
initOverlayScrollbarsStatics(); initOverlayScrollbarsStatics();
var arr = [ ];
var inst;
var result;
if(pluginTargetElements.length > 0) { if(pluginTargetElements.length > 0) {
if(FRAMEWORK.isPlainObject(options)) { if(optsIsPlainObj) {
FRAMEWORK.each(pluginTargetElements, function (i, v) { FRAMEWORK.each(pluginTargetElements, function (i, v) {
inst = v; inst = v;
if(inst !== undefined) if(inst !== undefined)
js/OverlayScrollbars.min.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
js/jquery.overlayScrollbars.js
+77 -49
View File
@@ -2,13 +2,13 @@
* OverlayScrollbars * OverlayScrollbars
* https://github.com/KingSora/OverlayScrollbars * https://github.com/KingSora/OverlayScrollbars
* *
* Version: 1.6.0 * Version: 1.6.1
* *
* Copyright KingSora. * Copyright KingSora.
* https://github.com/KingSora * https://github.com/KingSora
* *
* Released under the MIT license. * Released under the MIT license.
* Date: 02.12.2018 * Date: 16.12.2018
*/ */
(function (global, factory) { (function (global, factory) {
@@ -107,7 +107,7 @@
* @returns {number} The current time. * @returns {number} The current time.
*/ */
now: function() { now: function() {
return Date.now() || new Date().getTime(); return Date.now && Date.now() || new Date().getTime();
}, },
/** /**
@@ -521,7 +521,7 @@
var strHidden = 'hidden'; var strHidden = 'hidden';
var strScroll = 'scroll'; var strScroll = 'scroll';
var bodyElement = FRAMEWORK('body'); var bodyElement = FRAMEWORK('body');
var scrollbarDummyElement = FRAMEWORK('<div id="hs-dummy-scrollbar-size"><div style="height: 200%; width: 200%; margin: 10px 0;"></div></div>'); var scrollbarDummyElement = FRAMEWORK('<div id="os-dummy-scrollbar-size"><div></div></div>');
var scrollbarDummyElement0 = scrollbarDummyElement[0]; var scrollbarDummyElement0 = scrollbarDummyElement[0];
var dummyContainerChild = FRAMEWORK(scrollbarDummyElement.children('div').eq(0)); var dummyContainerChild = FRAMEWORK(scrollbarDummyElement.children('div').eq(0));
@@ -1864,8 +1864,8 @@
return; return;
var wrapAttrOff = !_textareaAutoWrappingCache; var wrapAttrOff = !_textareaAutoWrappingCache;
var minWidth = _viewportSize.w - (!_isBorderBox && !_paddingAbsoluteCache && _widthAutoCache ? _paddingY + _borderY : 0); var minWidth = _viewportSize.w /* - (!_isBorderBox && !_paddingAbsoluteCache && _widthAutoCache ? _paddingY + _borderY : 0) */;
var minHeight = _viewportSize.h - (!_isBorderBox && !_paddingAbsoluteCache && _heightAutoCache ? _paddingY + _borderY : 0); var minHeight = _viewportSize.h /* - (!_isBorderBox && !_paddingAbsoluteCache && _heightAutoCache ? _paddingY + _borderY : 0) */;
var css = { }; var css = { };
var doMeasure = _widthAutoCache || wrapAttrOff; var doMeasure = _widthAutoCache || wrapAttrOff;
var measureElement = _targetElement[0]; var measureElement = _targetElement[0];
@@ -1881,29 +1881,32 @@
//set width auto //set width auto
css[_strWidth] = _strAuto; css[_strWidth] = _strAuto;
_targetElement.css(css); _targetElement.css(css);
//measure width //measure width
origWidth = measureElement[LEXICON.oW]; origWidth = measureElement[LEXICON.oW];
width = doMeasure ? MATH.max(origWidth, measureElement[LEXICON.sW] - 1) : 1; width = doMeasure ? MATH.max(origWidth, measureElement[LEXICON.sW] - 1) : 1;
width += (_widthAutoCache ? _marginX + (!_isBorderBox ? wrapAttrOff ? 0 : _paddingX + _borderX : 0) : 0); /*width += (_widthAutoCache ? _marginX + (!_isBorderBox ? wrapAttrOff ? 0 : _paddingX + _borderX : 0) : 0);*/
//set measured width and height auto //set measured width
css[_strWidth] = _widthAutoCache ? width : _strHundredPercent; css[_strWidth] = _widthAutoCache ? _strAuto /*width*/ : _strHundredPercent;
css[_strHeight] = _strAuto; //_strAuto css[_strMinMinus + _strWidth] = _strHundredPercent;
//set height auto
css[_strHeight] = _strAuto;
_targetElement.css(css); _targetElement.css(css);
//measure height //measure height
origHeight = measureElement[LEXICON.oH]; origHeight = measureElement[LEXICON.oH];
height = MATH.max(origHeight, measureElement[LEXICON.sH] - 1); height = MATH.max(origHeight, measureElement[LEXICON.sH] - 1);
//append correct size values //append correct size values
css[_strWidth] = width; css[_strWidth] = width;
css[_strHeight] = height; css[_strHeight] = height;
_textareaCoverElement.css(css); _textareaCoverElement.css(css);
//apply min width / min height to prevent textarea collapsing //apply min width / min height to prevent textarea collapsing
css[_strMinMinus + _strWidth] = minWidth + (!_isBorderBox && _widthAutoCache ? _paddingX + _borderX : 0); css[_strMinMinus + _strWidth] = minWidth /*+ (!_isBorderBox && _widthAutoCache ? _paddingX + _borderX : 0)*/;
css[_strMinMinus + _strHeight] = minHeight + (!_isBorderBox && _heightAutoCache ? _paddingY + _borderY : 0); css[_strMinMinus + _strHeight] = minHeight /*+ (!_isBorderBox && _heightAutoCache ? _paddingY + _borderY : 0)*/;
_targetElement.css(css); _targetElement.css(css);
return { return {
@@ -2403,15 +2406,16 @@
var strOverflowY = strOverflow + '-y'; var strOverflowY = strOverflow + '-y';
var strHidden = 'hidden'; var strHidden = 'hidden';
var strVisible = 'visible'; var strVisible = 'visible';
//decide whether the content overflow must get hidden for correct overflow measuring, it MUST be always hidden if the height is auto //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 ? var hideOverflow4CorrectMeasuring = _restrictedMeasuring ?
(_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y) || //it must be hidden if native scrollbars are overlaid (_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 (_viewportSize.w < _nativeScrollbarMinSize.y || _viewportSize.h < _nativeScrollbarMinSize.x) || //it must be hidden if host-element is too small
heightAuto || displayIsHiddenChanged //it must be hidden if height is auto or display was change heightAuto || displayIsHiddenChanged //it must be hidden if height is auto or display was change
: heightAuto; //if there is not the restricted Measuring bug, it must be hidden if the 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 = {}; //don't change the overflow prop as it is very expensive and affects performance !A LOT!
var viewportElementResetCSS = { };
var resetXTmp = _hasOverflowCache.y && _hideOverflowCache.ys && !ignoreOverlayScrollbarHiding ? (_nativeScrollbarIsOverlaid.y ? _viewportElement.css(isRTLLeft) : -_nativeScrollbarSize.y) : 0; var resetXTmp = _hasOverflowCache.y && _hideOverflowCache.ys && !ignoreOverlayScrollbarHiding ? (_nativeScrollbarIsOverlaid.y ? _viewportElement.css(isRTLLeft) : -_nativeScrollbarSize.y) : 0;
var resetBottomTmp = _hasOverflowCache.x && _hideOverflowCache.xs && !ignoreOverlayScrollbarHiding ? (_nativeScrollbarIsOverlaid.x ? _viewportElement.css(_strBottom) : -_nativeScrollbarSize.x) : 0; var resetBottomTmp = _hasOverflowCache.x && _hideOverflowCache.xs && !ignoreOverlayScrollbarHiding ? (_nativeScrollbarIsOverlaid.x ? _viewportElement.css(_strBottom) : -_nativeScrollbarSize.x) : 0;
setTopRightBottomLeft(viewportElementResetCSS, _strEmpty); setTopRightBottomLeft(viewportElementResetCSS, _strEmpty);
@@ -2447,7 +2451,7 @@
//has to be clientSize because offsetSize respect borders. //has to be clientSize because offsetSize respect borders.
var hostSize = getHostSize(); var hostSize = getHostSize();
var contentGlueSize = { var contentGlueSize = {
w: MATH.max(contentClientSize.w + padding.ax, hostSize.w - _paddingX) - (textareaDynWidth ? (_isTextarea && widthAuto ? _marginX + (!_isBorderBox ? _paddingX + _borderX : 0) : 0) : 0), w: MATH.max(contentClientSize.w + padding.ax, hostSize.w - _paddingX) /* - (textareaDynWidth ? (_isTextarea && widthAuto ? _marginX + (!_isBorderBox ? _paddingX + _borderX : 0) : 0) : 0) */,
h: MATH.max(contentClientSize.h + padding.ay, hostSize.h - _paddingY) h: MATH.max(contentClientSize.h + padding.ay, hostSize.h - _paddingY)
}; };
contentGlueSize.c = checkCacheDouble(contentGlueSize, _contentGlueSizeCache, force); contentGlueSize.c = checkCacheDouble(contentGlueSize, _contentGlueSizeCache, force);
@@ -2462,7 +2466,7 @@
} }
var maxWidth = contentGlueElementCSS[_strWidth] + (_isBorderBox ? _borderX : -_paddingX); var maxWidth = contentGlueElementCSS[_strWidth] + (_isBorderBox ? _borderX : -_paddingX);
var maxHeight = contentGlueElementCSS[_strHeight] + (_isBorderBox ? _borderY : -_paddingX); var maxHeight = contentGlueElementCSS[_strHeight] + (_isBorderBox ? _borderY : -_paddingY);
var textareaCoverCSS = {}; var textareaCoverCSS = {};
//make contentGlue size -1 if element is not auto sized, to make sure that a resize event happens when the element shrinks //make contentGlue size -1 if element is not auto sized, to make sure that a resize event happens when the element shrinks
@@ -2472,9 +2476,9 @@
contentGlueElementCSS[_strHeight] = hostSize.h - (_isBorderBox ? 0 : _paddingY + _borderY) - 1 - _marginY; contentGlueElementCSS[_strHeight] = hostSize.h - (_isBorderBox ? 0 : _paddingY + _borderY) - 1 - _marginY;
//if size is auto and host is same size as max size, make content glue size +1 to make sure size changes will be detected //if size is auto and host is same size as max size, make content glue size +1 to make sure size changes will be detected
if (cssMaxValue.cw && cssMaxValue.iw === maxWidth) if (widthAuto && cssMaxValue.cw && cssMaxValue.iw === maxWidth)
contentGlueElementCSS[_strWidth] = maxWidth + (_isBorderBox ? 0 : _paddingX) + 1; contentGlueElementCSS[_strWidth] = maxWidth + (_isBorderBox ? 0 : _paddingX) + 1;
if (cssMaxValue.ch && cssMaxValue.ih === maxHeight) if (heightAuto && cssMaxValue.ch && cssMaxValue.ih === maxHeight)
contentGlueElementCSS[_strHeight] = maxHeight + (_isBorderBox ? 0 : _paddingY) + 1; contentGlueElementCSS[_strHeight] = maxHeight + (_isBorderBox ? 0 : _paddingY) + 1;
//if size is auto and host is smaller than size as min size, make content glue size -1 to make sure size changes will be detected (this is only needed if padding is 0) //if size is auto and host is smaller than size as min size, make content glue size -1 to make sure size changes will be detected (this is only needed if padding is 0)
@@ -2489,7 +2493,7 @@
contentGlueElementCSS[_strHeight] -= 1; contentGlueElementCSS[_strHeight] -= 1;
} }
//make sure content glue size at least 1 //make sure content glue size is at least 1
if (contentClientSize.h > 0) { if (contentClientSize.h > 0) {
contentGlueElementCSS[_strWidth] = MATH.max(1, contentGlueElementCSS[_strWidth]); contentGlueElementCSS[_strWidth] = MATH.max(1, contentGlueElementCSS[_strWidth]);
contentGlueElementCSS[_strHeight] = MATH.max(1, contentGlueElementCSS[_strHeight]); contentGlueElementCSS[_strHeight] = MATH.max(1, contentGlueElementCSS[_strHeight]);
@@ -2876,6 +2880,8 @@
refreshScrollbarsInteractive(false, scrollbarsDragScrolling); refreshScrollbarsInteractive(false, scrollbarsDragScrolling);
//handle scroll //handle scroll
var textareaScrollX;
var textareaScrollY;
if (_isTextarea && contentSizeChanged) { if (_isTextarea && contentSizeChanged) {
var textareaInfo = getTextareaInfo(); var textareaInfo = getTextareaInfo();
if (textareaInfo) { if (textareaInfo) {
@@ -2888,32 +2894,34 @@
var cursorPos = textareaInfo.p; var cursorPos = textareaInfo.p;
var cursorMax = textareaInfo.m; var cursorMax = textareaInfo.m;
var cursorIsLastPosition = (cursorPos >= cursorMax && _textareaHasFocus); var cursorIsLastPosition = (cursorPos >= cursorMax && _textareaHasFocus);
var doScroll = { var textareaScrollAmount = {
x: (!textareaAutoWrapping && (cursorCol === lastCol && cursorRow === widestRow)) ? _overflowAmountCache.x : -1, x: (!textareaAutoWrapping && (cursorCol === lastCol && cursorRow === widestRow)) ? _overflowAmountCache.x : -1,
y: (textareaAutoWrapping ? cursorIsLastPosition || textareaRowsChanged && (previousOverflow !== undefined ? (currScroll.t === previousOverflow.y) : false) : (cursorIsLastPosition || textareaRowsChanged) && cursorRow === lastRow) ? _overflowAmountCache.y : -1 y: (textareaAutoWrapping ? cursorIsLastPosition || textareaRowsChanged && (previousOverflow !== undefined ? (currScroll.t === previousOverflow.y) : false) : (cursorIsLastPosition || textareaRowsChanged) && cursorRow === lastRow) ? _overflowAmountCache.y : -1
}; };
var doScrollX = doScroll.x > -1; textareaScrollX = textareaScrollAmount.x > -1;
var doScrollY = doScroll.y > -1; textareaScrollY = textareaScrollAmount.y > -1;
if (doScrollX || doScrollY) { if (textareaScrollY)
if (doScrollY) _viewportElement[_strScrollTop](textareaScrollAmount.y);
_viewportElement[_strScrollTop](doScroll.y); if (textareaScrollX) {
if (doScrollX) { if (_isRTL && _normalizeRTLCache && _rtlScrollBehavior.i)
if (_isRTL && _normalizeRTLCache && _rtlScrollBehavior.i) _viewportElement[_strScrollLeft](0); //if inverted, scroll to 0 -> normalized this means to max scroll offset.
_viewportElement[_strScrollLeft](0); //if inverted, scroll to 0 -> normalized this means to max scroll offset. else
else _viewportElement[_strScrollLeft](textareaScrollAmount.x);
_viewportElement[_strScrollLeft](doScroll.x);
}
} }
} }
_textareaInfoCache = textareaInfo; _textareaInfoCache = textareaInfo;
} }
else if (!_isTextarea) { if (_isRTL && _rtlScrollBehavior.i && _nativeScrollbarIsOverlaid.y && hasOverflow.x && _normalizeRTLCache)
if (_isRTL && _rtlScrollBehavior.i && _nativeScrollbarIsOverlaid.y && hasOverflow.x && _normalizeRTLCache) currScroll.l += _contentBorderSize.w || 0;
currScroll.l += _contentBorderSize.w || 0; if(!textareaScrollX)
_viewportElement[_strScrollLeft](currScroll.l); _viewportElement[_strScrollLeft](currScroll.l);
if(!textareaScrollY)
_viewportElement[_strScrollTop](currScroll.t); _viewportElement[_strScrollTop](currScroll.t);
} if(widthAuto)
_hostElement[_strScrollLeft](0);
if(heightAuto)
_hostElement[_strScrollTop](0);
if (cssDirectionChanged) { if (cssDirectionChanged) {
dispatchCallback("onDirectionChanged", { dispatchCallback("onDirectionChanged", {
@@ -4907,9 +4915,24 @@
//create mutation observers //create mutation observers
createMutationObservers(); createMutationObservers();
//apply the body scroll to handle it right in the update method if(_isBody) {
if(_isBody) //apply the body scroll to handle it right in the update method
_viewportElement[_strScrollLeft](initBodyScroll.l)[_strScrollTop](initBodyScroll.t); _viewportElement[_strScrollLeft](initBodyScroll.l)[_strScrollTop](initBodyScroll.t);
//set the focus on the viewport element so you dont have to click on the page to use keyboard keys (up / down / space) for scrolling
if(document.activeElement == targetElement && _viewportElement[0].focus) {
//set a tabindex to make the viewportElement focusable
_viewportElement.attr('tabindex', '-1');
_viewportElement[0].focus();
/* the tabindex has to be removed due to;
* If you set the tabindex attribute on an <div>, then its child content cannot be scrolled with the arrow keys unless you set tabindex on the content, too
* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
*/
_viewportElement.one(_strMouseTouchDownEvent, function() {
_viewportElement.removeAttr('tabindex');
});
}
}
//build resize observer for the host element //build resize observer for the host element
addResizeObserver(_sizeObserverElement, hostOnResized); addResizeObserver(_sizeObserverElement, hostOnResized);
@@ -4930,16 +4953,16 @@
if(type(extensions) == TYPES.s) if(type(extensions) == TYPES.s)
extensions = [ extensions ]; extensions = [ extensions ];
if(COMPATIBILITY.isA(extensions)) if(COMPATIBILITY.isA(extensions))
FRAMEWORK.each(extensions, function () {_base.addExt(this); }); FRAMEWORK.each(extensions, function (index, value) {_base.addExt(value); });
else if(FRAMEWORK.isPlainObject(extensions)) else if(FRAMEWORK.isPlainObject(extensions))
FRAMEWORK.each(extensions, function (key, value) { _base.addExt(key, value); }); FRAMEWORK.each(extensions, function (key, value) { _base.addExt(key, value); });
//add the transition class for transitions AFTER the first update & AFTER the applied extensions (for preventing unwanted transitions) //add the transition class for transitions AFTER the first update & AFTER the applied extensions (for preventing unwanted transitions)
setTimeout(function () { setTimeout(function () {
if (_supportTransition && !_destroyed) if (_supportTransition && !_destroyed)
addClass(_hostElement, _classNameHostTransition) addClass(_hostElement, _classNameHostTransition);
}, 333); }, 333);
return _initialized; return _initialized;
} }
@@ -4960,7 +4983,16 @@
window[PLUGINNAME] = function(pluginTargetElements, options, extensions) { window[PLUGINNAME] = function(pluginTargetElements, options, extensions) {
if(arguments.length === 0) if(arguments.length === 0)
return this; return this;
var arr = [ ];
var optsIsPlainObj = FRAMEWORK.isPlainObject(options);
var inst;
var result;
//pluginTargetElements is null or undefined
if(!pluginTargetElements)
return optsIsPlainObj || !options ? result : arr;
/* /*
pluginTargetElements will be converted to: pluginTargetElements will be converted to:
1. A jQueryElement Array 1. A jQueryElement Array
@@ -4971,12 +5003,8 @@
pluginTargetElements = pluginTargetElements.length != undefined ? pluginTargetElements : [ pluginTargetElements[0] || pluginTargetElements ]; pluginTargetElements = pluginTargetElements.length != undefined ? pluginTargetElements : [ pluginTargetElements[0] || pluginTargetElements ];
initOverlayScrollbarsStatics(); initOverlayScrollbarsStatics();
var arr = [ ];
var inst;
var result;
if(pluginTargetElements.length > 0) { if(pluginTargetElements.length > 0) {
if(FRAMEWORK.isPlainObject(options)) { if(optsIsPlainObj) {
FRAMEWORK.each(pluginTargetElements, function (i, v) { FRAMEWORK.each(pluginTargetElements, function (i, v) {
inst = v; inst = v;
if(inst !== undefined) if(inst !== undefined)
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.6.0", "version": "1.6.1",
"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",