mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-05-17 05:29:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

version 1.11.0

Browse Source
This commit is contained in:
Rene
2020-02-29 22:51:04 +01:00
parent 7b57bc7d92
commit 8a9f312f12
8 changed files with 268 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/OverlayScrollbars.css
+51 -38
View File
@@ -2,13 +2,13 @@
* OverlayScrollbars
* https://github.com/KingSora/OverlayScrollbars
*
* Version: 1.10.3
* Version: 1.11.0
*
* Copyright KingSora | Rene Haas.
* https://github.com/KingSora
*
* Released under the MIT license.
* Date: 02.02.2020
* Date: 29.02.2020
*/
/*
@@ -96,6 +96,21 @@ body.os-dragging * {
height: 200%;
margin: 10px 0;
}
/* fix restricted measuring */
#os-dummy-scrollbar-size:before,
#os-dummy-scrollbar-size:after,
.os-content:before,
.os-content:after {
content: '';
display: table;
width: 0.01px;
height: 0.01px;
line-height: 0;
font-size: 0;
flex-grow: 0;
flex-shrink: 0;
visibility: hidden;
}
#os-dummy-scrollbar-size,
.os-viewport {
-ms-overflow-style: scrollbar !important;
@@ -172,15 +187,6 @@ body.os-dragging * {
width: 100%;
visibility: visible;
}
.os-content:before,
.os-content:after {
content: '';
display: table;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
}
.os-content > .os-textarea {
box-sizing: border-box !important;
direction: inherit !important;
@@ -246,7 +252,7 @@ body.os-dragging * {
.os-resize-observer-host {
box-sizing: inherit;
display: block;
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
@@ -263,11 +269,7 @@ body.os-dragging * {
border-style: solid;
box-sizing: border-box;
}
.os-resize-observer-host:after {
content: '';
}
.os-resize-observer-host > .os-resize-observer,
.os-resize-observer-host:after {
.os-resize-observer-host > .os-resize-observer {
height: 200%;
width: 200%;
padding: inherit;
@@ -276,9 +278,17 @@ body.os-dragging * {
display: block;
box-sizing: content-box;
}
.os-resize-observer.observed,
object.os-resize-observer {
box-sizing: border-box !important;
.os-resize-observer-host.observed {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.os-resize-observer-host.observed > .os-resize-observer {
position: relative;
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}
.os-size-auto-observer {
box-sizing: inherit !important;
@@ -334,8 +344,27 @@ object.os-resize-observer {
.os-resize-observer {
-webkit-animation-duration: 0.001s;
animation-duration: 0.001s;
-webkit-animation-name: hs-resize-observer-dummy-animation;
animation-name: hs-resize-observer-dummy-animation;
-webkit-animation-name: os-resize-observer-dummy-animation;
animation-name: os-resize-observer-dummy-animation;
}
object.os-resize-observer {
box-sizing: border-box !important;
}
@-webkit-keyframes os-resize-observer-dummy-animation {
from {
z-index: 0;
}
to {
z-index: -1;
}
}
@keyframes os-resize-observer-dummy-animation {
from {
z-index: 0;
}
to {
z-index: -1;
}
}
/*
@@ -468,22 +497,6 @@ html.os-html > .os-host > .os-scrollbar {
}
.os-host-overflow-y {
}
@-webkit-keyframes hs-resize-observer-dummy-animation {
from {
z-index: 0;
}
to {
z-index: -1;
}
}
@keyframes hs-resize-observer-dummy-animation {
from {
z-index: 0;
}
to {
z-index: -1;
}
}
/*
THEMES:
css/OverlayScrollbars.min.css
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
js/OverlayScrollbars.js
+87 -73
View File
@@ -2,13 +2,13 @@
* OverlayScrollbars
* https://github.com/KingSora/OverlayScrollbars
*
* Version: 1.10.3
* Version: 1.11.0
*
* Copyright KingSora | Rene Haas.
* https://github.com/KingSora
*
* Released under the MIT license.
* Date: 02.02.2020
* Date: 29.02.2020
*/
(function (global, factory) {
@@ -42,6 +42,7 @@
i: 'id',
l: 'length',
p: 'prototype',
ti: 'tabindex',
oH: 'offsetHeight',
cH: 'clientHeight',
sH: 'scrollHeight',
@@ -1772,6 +1773,7 @@
})(),
restrictedMeasuring: (function () {
//https://bugzilla.mozilla.org/show_bug.cgi?id=1439305
//since 1.11.0 always false -> fixed via CSS (hopefully)
scrollbarDummyElement.css(strOverflow, strHidden);
var scrollSize = {
w: scrollbarDummyElement0[LEXICON.sW],
@@ -1788,8 +1790,9 @@
scrollbarDummyElement.css({ 'overflow-y': strHidden, 'overflow-x': strScroll, 'direction': 'rtl' }).scrollLeft(0);
var dummyContainerOffset = scrollbarDummyElement.offset();
var dummyContainerChildOffset = dummyContainerChild.offset();
scrollbarDummyElement.scrollLeft(999);
var dummyContainerScrollOffsetAfterScroll = dummyContainerChild.offset();
//https://github.com/KingSora/OverlayScrollbars/issues/187
scrollbarDummyElement.scrollLeft(-999);
var dummyContainerChildOffsetAfterScroll = dummyContainerChild.offset();
return {
//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)
@@ -1800,7 +1803,7 @@
//'n' means 'negate' (n === true means that the axis must be negated to be correct)
//true = negative
//false = positive
n: dummyContainerChildOffset.left - dummyContainerScrollOffsetAfterScroll.left === 0
n: dummyContainerChildOffset.left !== dummyContainerChildOffsetAfterScroll.left
};
})(),
supportTransform: VENDORS._cssProperty('transform') !== undefined,
@@ -2171,6 +2174,9 @@
//callbacks:
var _callbacksInitQeueue = [];
//attrs viewport shall inherit from target
var _viewportAttrsFromTarget = [LEXICON.ti];
//options:
var _defaultOptions;
var _currentOptions;
@@ -2258,7 +2264,6 @@
var _textareaDynHeightCache;
var _textareaDynWidthCache;
var _bodyMinSizeCache;
var _viewportScrollSizeCache;
var _displayIsHiddenCache;
var _updateAutoCache = {};
@@ -2269,7 +2274,7 @@
var _mutationObserverContentCallback;
var _mutationObserversConnected;
var _mutationObserverAttrsTextarea = ['wrap', 'cols', 'rows'];
var _mutationObserverAttrsHost = [LEXICON.i, LEXICON.c, LEXICON.s, 'open'];
var _mutationObserverAttrsHost = [LEXICON.i, LEXICON.c, LEXICON.s, 'open'].concat(_viewportAttrsFromTarget);
//events:
var _destroyEvents = [];
@@ -2351,7 +2356,7 @@
//add resize observer:
if (onElementResizedCallback) {
if (_supportResizeObserver) {
var element = targetElement.append(generateDiv(_classNameResizeObserverElement + ' observed')).contents()[0];
var element = targetElement.addClass('observed').append(generateDiv(_classNameResizeObserverElement)).contents()[0];
var observer = element[_strResizeObserverProperty] = new resizeObserver(callback);
observer.observe(element);
}
@@ -2458,7 +2463,7 @@
}
else {
var obj = _documentElementNative.createElement(TYPES.o);
obj.setAttribute('tabindex', '-1');
obj.setAttribute(LEXICON.ti, '-1');
obj.setAttribute(LEXICON.c, _classNameResizeObserverElement);
obj.onload = function () {
var wnd = this.contentDocument.defaultView;
@@ -2587,6 +2592,7 @@
_mutationObserverHostCallback = function (mutations) {
var doUpdate = false;
var mutation;
var mutatedAttrs = [];
if (_initialized && !_sleeping) {
each(mutations, function () {
@@ -2594,17 +2600,20 @@
mutationTarget = mutation.target;
mutationAttrName = mutation.attributeName;
if (mutationAttrName === LEXICON.c)
doUpdate = hostClassNamesChanged(mutation.oldValue, mutationTarget.className);
else if (mutationAttrName === LEXICON.s)
doUpdate = mutation.oldValue !== mutationTarget[LEXICON.s].cssText;
else
doUpdate = true;
if (doUpdate)
return false;
if(!doUpdate) {
if (mutationAttrName === LEXICON.c)
doUpdate = hostClassNamesChanged(mutation.oldValue, mutationTarget.className);
else if (mutationAttrName === LEXICON.s)
doUpdate = mutation.oldValue !== mutationTarget[LEXICON.s].cssText;
else
doUpdate = true;
}
mutatedAttrs.push(mutationAttrName);
});
updateViewportAttrsFromTarget(mutatedAttrs);
if (doUpdate)
_base.update(_strAuto);
}
@@ -2890,22 +2899,12 @@
var contentMeasureElement = getContentMeasureElement();
var textareaValueLength = _isTextarea && _widthAutoCache && !_textareaAutoWrappingCache ? _targetElement.val().length : 0;
var setCSS = !_mutationObserversConnected && _widthAutoCache && !_isTextarea;
var viewportScrollSize = {};
var css = {};
var float;
var bodyMinSizeC;
var changed;
var viewportScrollSizeChanged;
var contentElementScrollSize;
//fix for https://bugzilla.mozilla.org/show_bug.cgi?id=1439305, it only works with "clipAlways : true"
//it can work with "clipAlways : false" too, but I had to set the overflow of the viewportElement to hidden every time before measuring
if (_restrictedMeasuring) {
viewportScrollSize = {
x: _viewportElementNative[LEXICON.sW],
y: _viewportElementNative[LEXICON.sH]
}
}
if (setCSS) {
float = _contentElement.css(_strFloat);
css[_strFloat] = _isRTL ? _strRight : _strLeft;
@@ -2924,12 +2923,10 @@
bodyMinSizeC = bodyMinSizeChanged();
changed = checkCache(contentElementScrollSize, _contentElementScrollSizeChangeDetectedCache);
viewportScrollSizeChanged = checkCache(viewportScrollSize, _viewportScrollSizeCache);
_contentElementScrollSizeChangeDetectedCache = contentElementScrollSize;
_viewportScrollSizeCache = viewportScrollSize;
return changed || bodyMinSizeC || viewportScrollSizeChanged;
return changed || bodyMinSizeC;
}
/**
@@ -2939,37 +2936,41 @@
function meaningfulAttrsChanged() {
if (_sleeping || _mutationObserversConnected)
return;
var changed;
var elem;
var curr;
var cache;
var changedAttrs = [];
var checks = [
{
_elem: _hostElement,
_props: _mutationObserverAttrsHost.concat(':visible')
_attrs: _mutationObserverAttrsHost.concat(':visible')
},
{
_elem: _isTextarea ? _targetElement : undefined,
_props: _mutationObserverAttrsTextarea
_attrs: _mutationObserverAttrsTextarea
}
];
each(checks, function (index, check) {
elem = check._elem;
if (elem) {
each(check._props, function (index, prop) {
curr = prop.charAt(0) === ':' ? elem.is(prop) : elem.attr(prop);
cache = _updateAutoCache[prop];
each(check._attrs, function (index, attr) {
curr = attr.charAt(0) === ':' ? elem.is(attr) : elem.attr(attr);
cache = _updateAutoCache[attr];
if(checkCache(curr, cache)) {
changedAttrs.push(attr);
}
changed = changed || checkCache(curr, cache);
_updateAutoCache[prop] = curr;
_updateAutoCache[attr] = curr;
});
}
});
return changed;
updateViewportAttrsFromTarget(changedAttrs);
return changedAttrs[LEXICON.l] > 0;
}
/**
@@ -3051,6 +3052,26 @@
//==== Update ====//
/**
* Sets the attribute values of the viewport element to the values from the target element.
* The value of a attribute is only set if the attribute is whitelisted.
* @attrs attrs The array of attributes which shall be set or undefined if all whitelisted shall be set.
*/
function updateViewportAttrsFromTarget(attrs) {
attrs = attrs || _viewportAttrsFromTarget;
each(attrs, function (index, attr) {
if (COMPATIBILITY.inA(attr, _viewportAttrsFromTarget) > -1) {
var targetAttr = _targetElement.attr(attr);
if(type(targetAttr) == TYPES.s) {
_viewportElement.attr(attr, targetAttr);
}
else {
_viewportElement.removeAttr(attr);
}
}
});
}
/**
* Updates the variables and size of the textarea element, and manages the scroll on new line or new character.
*/
@@ -3626,41 +3647,36 @@
var strOverflowY = strOverflow + '-y';
var strHidden = 'hidden';
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
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 || displayIsHiddenChanged //it must be hidden if height is auto or display was changed
: 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
//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 && !_nativeScrollbarStyling ? (_nativeScrollbarIsOverlaid.y ? _viewportElement.css(isRTLLeft) : -_nativeScrollbarSize.y) : 0;
var resetBottomTmp = _hasOverflowCache.x && _hideOverflowCache.xs && !ignoreOverlayScrollbarHiding && !_nativeScrollbarStyling ? (_nativeScrollbarIsOverlaid.x ? _viewportElement.css(_strBottom) : -_nativeScrollbarSize.x) : 0;
setTopRightBottomLeft(viewportElementResetCSS, _strEmpty);
_viewportElement.css(viewportElementResetCSS);
if (hideOverflow4CorrectMeasuring)
_contentElement.css(strOverflow, strHidden);
if(!_nativeScrollbarStyling) {
var viewportElementResetCSS = {};
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;
setTopRightBottomLeft(viewportElementResetCSS, _strEmpty);
_viewportElement.css(viewportElementResetCSS);
}
//measure several sizes:
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
var contentMeasureElementGuaranty = _restrictedMeasuring && !hideOverflow4CorrectMeasuring ? _viewportElementNative : contentMeasureElement;
var contentSize = {
//use clientSize because natively overlaidScrollbars add borders
w: textareaDynOrigSize.w || contentMeasureElement[LEXICON.cW],
h: textareaDynOrigSize.h || contentMeasureElement[LEXICON.cH]
};
var scrollSize = {
w: MATH.max(contentMeasureElement[LEXICON.sW], contentMeasureElementGuaranty[LEXICON.sW]),
h: MATH.max(contentMeasureElement[LEXICON.sH], contentMeasureElementGuaranty[LEXICON.sH])
w: contentMeasureElement[LEXICON.sW],
h: contentMeasureElement[LEXICON.sH]
};
//apply the correct viewport style and measure viewport size
viewportElementResetCSS[_strBottom] = wasHeightAuto ? _strEmpty : resetBottomTmp;
viewportElementResetCSS[isRTLLeft] = wasWidthAuto ? _strEmpty : resetXTmp;
_viewportElement.css(viewportElementResetCSS);
if(!_nativeScrollbarStyling) {
viewportElementResetCSS[_strBottom] = wasHeightAuto ? _strEmpty : resetBottomTmp;
viewportElementResetCSS[isRTLLeft] = wasWidthAuto ? _strEmpty : resetXTmp;
_viewportElement.css(viewportElementResetCSS);
}
_viewportSize = getViewportSize();
//measure and correct several sizes
@@ -3738,16 +3754,12 @@
//measure again, but this time all correct sizes:
var contentScrollSize = {
w: MATH.max(contentMeasureElement[LEXICON.sW], contentMeasureElementGuaranty[LEXICON.sW]),
h: MATH.max(contentMeasureElement[LEXICON.sH], contentMeasureElementGuaranty[LEXICON.sH])
w: contentMeasureElement[LEXICON.sW],
h: contentMeasureElement[LEXICON.sH],
};
contentScrollSize.c = contentSizeChanged = checkCacheAutoForce(contentScrollSize, _contentScrollSizeCache);
_contentScrollSizeCache = contentScrollSize;
//remove overflow hidden to restore overflow
if (hideOverflow4CorrectMeasuring)
_contentElement.css(strOverflow, _strEmpty);
//refresh viewport size after correct measuring
_viewportSize = getViewportSize();
@@ -4315,6 +4327,8 @@
_paddingElementNative = _paddingElement[0];
_viewportElementNative = _viewportElement[0];
_contentElementNative = _contentElement[0];
updateViewportAttrsFromTarget();
}
else {
if (_domExists && _initialized) {
@@ -5531,7 +5545,7 @@
var doUpdateAuto;
var mutHost;
var mutContent;
if (isString) {
if (force === _strAuto) {
attrsChanged = meaningfulAttrsChanged();
@@ -6413,7 +6427,7 @@
initBodyScroll.t = MATH.max(_targetElement[_strScrollTop](), _htmlElement[_strScrollTop](), _windowElement[_strScrollTop]());
bodyMouseTouchDownListener = function () {
_viewportElement.removeAttr('tabindex');
_viewportElement.removeAttr(LEXICON.ti);
setupResponsiveEventListener(_viewportElement, _strMouseTouchDownEvent, bodyMouseTouchDownListener, true, true);
}
}
@@ -6427,8 +6441,8 @@
setupStructureEvents();
setupScrollbarEvents(true);
setupScrollbarEvents(false);
setupScrollbarCornerEvents();
setupScrollbarCornerEvents();
//create mutation observers
createMutationObservers();
@@ -6442,7 +6456,7 @@
//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 && _viewportElementNative.focus) {
//set a tabindex to make the viewportElement focusable
_viewportElement.attr('tabindex', '-1');
_viewportElement.attr(LEXICON.ti, '-1');
_viewportElementNative.focus();
/* the tabindex has to be removed due to;
js/OverlayScrollbars.min.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
js/jquery.overlayScrollbars.js
+100 -86
View File
@@ -2,13 +2,13 @@
* OverlayScrollbars
* https://github.com/KingSora/OverlayScrollbars
*
* Version: 1.10.3
* Version: 1.11.0
*
* Copyright KingSora | Rene Haas.
* https://github.com/KingSora
*
* Released under the MIT license.
* Date: 02.02.2020
* Date: 29.02.2020
*/
(function (global, factory) {
@@ -37,19 +37,20 @@
//y : 'symbol'
};
var LEXICON = {
c : 'class',
s : 'style',
i : 'id',
l : 'length',
p : 'prototype',
oH : 'offsetHeight',
cH : 'clientHeight',
sH : 'scrollHeight',
oW : 'offsetWidth',
cW : 'clientWidth',
sW : 'scrollWidth',
hOP : 'hasOwnProperty',
bCR : 'getBoundingClientRect'
c: 'class',
s: 'style',
i: 'id',
l: 'length',
p: 'prototype',
ti: 'tabindex',
oH: 'offsetHeight',
cH: 'clientHeight',
sH: 'scrollHeight',
oW: 'offsetWidth',
cW: 'clientWidth',
sW: 'scrollWidth',
hOP: 'hasOwnProperty',
bCR: 'getBoundingClientRect'
};
var VENDORS = (function() {
//https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix
@@ -690,6 +691,7 @@
})(),
restrictedMeasuring: (function () {
//https://bugzilla.mozilla.org/show_bug.cgi?id=1439305
//since 1.11.0 always false -> fixed via CSS (hopefully)
scrollbarDummyElement.css(strOverflow, strHidden);
var scrollSize = {
w: scrollbarDummyElement0[LEXICON.sW],
@@ -706,8 +708,9 @@
scrollbarDummyElement.css({ 'overflow-y': strHidden, 'overflow-x': strScroll, 'direction': 'rtl' }).scrollLeft(0);
var dummyContainerOffset = scrollbarDummyElement.offset();
var dummyContainerChildOffset = dummyContainerChild.offset();
scrollbarDummyElement.scrollLeft(999);
var dummyContainerScrollOffsetAfterScroll = dummyContainerChild.offset();
//https://github.com/KingSora/OverlayScrollbars/issues/187
scrollbarDummyElement.scrollLeft(-999);
var dummyContainerChildOffsetAfterScroll = dummyContainerChild.offset();
return {
//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)
@@ -718,7 +721,7 @@
//'n' means 'negate' (n === true means that the axis must be negated to be correct)
//true = negative
//false = positive
n: dummyContainerChildOffset.left - dummyContainerScrollOffsetAfterScroll.left === 0
n: dummyContainerChildOffset.left !== dummyContainerChildOffsetAfterScroll.left
};
})(),
supportTransform: VENDORS._cssProperty('transform') !== undefined,
@@ -1089,6 +1092,9 @@
//callbacks:
var _callbacksInitQeueue = [];
//attrs viewport shall inherit from target
var _viewportAttrsFromTarget = [LEXICON.ti];
//options:
var _defaultOptions;
var _currentOptions;
@@ -1176,7 +1182,6 @@
var _textareaDynHeightCache;
var _textareaDynWidthCache;
var _bodyMinSizeCache;
var _viewportScrollSizeCache;
var _displayIsHiddenCache;
var _updateAutoCache = {};
@@ -1187,7 +1192,7 @@
var _mutationObserverContentCallback;
var _mutationObserversConnected;
var _mutationObserverAttrsTextarea = ['wrap', 'cols', 'rows'];
var _mutationObserverAttrsHost = [LEXICON.i, LEXICON.c, LEXICON.s, 'open'];
var _mutationObserverAttrsHost = [LEXICON.i, LEXICON.c, LEXICON.s, 'open'].concat(_viewportAttrsFromTarget);
//events:
var _destroyEvents = [];
@@ -1269,7 +1274,7 @@
//add resize observer:
if (onElementResizedCallback) {
if (_supportResizeObserver) {
var element = targetElement.append(generateDiv(_classNameResizeObserverElement + ' observed')).contents()[0];
var element = targetElement.addClass('observed').append(generateDiv(_classNameResizeObserverElement)).contents()[0];
var observer = element[_strResizeObserverProperty] = new resizeObserver(callback);
observer.observe(element);
}
@@ -1376,7 +1381,7 @@
}
else {
var obj = _documentElementNative.createElement(TYPES.o);
obj.setAttribute('tabindex', '-1');
obj.setAttribute(LEXICON.ti, '-1');
obj.setAttribute(LEXICON.c, _classNameResizeObserverElement);
obj.onload = function () {
var wnd = this.contentDocument.defaultView;
@@ -1505,6 +1510,7 @@
_mutationObserverHostCallback = function (mutations) {
var doUpdate = false;
var mutation;
var mutatedAttrs = [];
if (_initialized && !_sleeping) {
each(mutations, function () {
@@ -1512,17 +1518,20 @@
mutationTarget = mutation.target;
mutationAttrName = mutation.attributeName;
if (mutationAttrName === LEXICON.c)
doUpdate = hostClassNamesChanged(mutation.oldValue, mutationTarget.className);
else if (mutationAttrName === LEXICON.s)
doUpdate = mutation.oldValue !== mutationTarget[LEXICON.s].cssText;
else
doUpdate = true;
if (doUpdate)
return false;
if(!doUpdate) {
if (mutationAttrName === LEXICON.c)
doUpdate = hostClassNamesChanged(mutation.oldValue, mutationTarget.className);
else if (mutationAttrName === LEXICON.s)
doUpdate = mutation.oldValue !== mutationTarget[LEXICON.s].cssText;
else
doUpdate = true;
}
mutatedAttrs.push(mutationAttrName);
});
updateViewportAttrsFromTarget(mutatedAttrs);
if (doUpdate)
_base.update(_strAuto);
}
@@ -1808,22 +1817,12 @@
var contentMeasureElement = getContentMeasureElement();
var textareaValueLength = _isTextarea && _widthAutoCache && !_textareaAutoWrappingCache ? _targetElement.val().length : 0;
var setCSS = !_mutationObserversConnected && _widthAutoCache && !_isTextarea;
var viewportScrollSize = {};
var css = {};
var float;
var bodyMinSizeC;
var changed;
var viewportScrollSizeChanged;
var contentElementScrollSize;
//fix for https://bugzilla.mozilla.org/show_bug.cgi?id=1439305, it only works with "clipAlways : true"
//it can work with "clipAlways : false" too, but I had to set the overflow of the viewportElement to hidden every time before measuring
if (_restrictedMeasuring) {
viewportScrollSize = {
x: _viewportElementNative[LEXICON.sW],
y: _viewportElementNative[LEXICON.sH]
}
}
if (setCSS) {
float = _contentElement.css(_strFloat);
css[_strFloat] = _isRTL ? _strRight : _strLeft;
@@ -1842,12 +1841,10 @@
bodyMinSizeC = bodyMinSizeChanged();
changed = checkCache(contentElementScrollSize, _contentElementScrollSizeChangeDetectedCache);
viewportScrollSizeChanged = checkCache(viewportScrollSize, _viewportScrollSizeCache);
_contentElementScrollSizeChangeDetectedCache = contentElementScrollSize;
_viewportScrollSizeCache = viewportScrollSize;
return changed || bodyMinSizeC || viewportScrollSizeChanged;
return changed || bodyMinSizeC;
}
/**
@@ -1857,37 +1854,41 @@
function meaningfulAttrsChanged() {
if (_sleeping || _mutationObserversConnected)
return;
var changed;
var elem;
var curr;
var cache;
var changedAttrs = [];
var checks = [
{
_elem: _hostElement,
_props: _mutationObserverAttrsHost.concat(':visible')
_attrs: _mutationObserverAttrsHost.concat(':visible')
},
{
_elem: _isTextarea ? _targetElement : undefined,
_props: _mutationObserverAttrsTextarea
_attrs: _mutationObserverAttrsTextarea
}
];
each(checks, function (index, check) {
elem = check._elem;
if (elem) {
each(check._props, function (index, prop) {
curr = prop.charAt(0) === ':' ? elem.is(prop) : elem.attr(prop);
cache = _updateAutoCache[prop];
each(check._attrs, function (index, attr) {
curr = attr.charAt(0) === ':' ? elem.is(attr) : elem.attr(attr);
cache = _updateAutoCache[attr];
if(checkCache(curr, cache)) {
changedAttrs.push(attr);
}
changed = changed || checkCache(curr, cache);
_updateAutoCache[prop] = curr;
_updateAutoCache[attr] = curr;
});
}
});
return changed;
updateViewportAttrsFromTarget(changedAttrs);
return changedAttrs[LEXICON.l] > 0;
}
/**
@@ -1969,6 +1970,26 @@
//==== Update ====//
/**
* Sets the attribute values of the viewport element to the values from the target element.
* The value of a attribute is only set if the attribute is whitelisted.
* @attrs attrs The array of attributes which shall be set or undefined if all whitelisted shall be set.
*/
function updateViewportAttrsFromTarget(attrs) {
attrs = attrs || _viewportAttrsFromTarget;
each(attrs, function (index, attr) {
if (COMPATIBILITY.inA(attr, _viewportAttrsFromTarget) > -1) {
var targetAttr = _targetElement.attr(attr);
if(type(targetAttr) == TYPES.s) {
_viewportElement.attr(attr, targetAttr);
}
else {
_viewportElement.removeAttr(attr);
}
}
});
}
/**
* Updates the variables and size of the textarea element, and manages the scroll on new line or new character.
*/
@@ -2544,41 +2565,36 @@
var strOverflowY = strOverflow + '-y';
var strHidden = 'hidden';
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
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 || displayIsHiddenChanged //it must be hidden if height is auto or display was changed
: 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
//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 && !_nativeScrollbarStyling ? (_nativeScrollbarIsOverlaid.y ? _viewportElement.css(isRTLLeft) : -_nativeScrollbarSize.y) : 0;
var resetBottomTmp = _hasOverflowCache.x && _hideOverflowCache.xs && !ignoreOverlayScrollbarHiding && !_nativeScrollbarStyling ? (_nativeScrollbarIsOverlaid.x ? _viewportElement.css(_strBottom) : -_nativeScrollbarSize.x) : 0;
setTopRightBottomLeft(viewportElementResetCSS, _strEmpty);
_viewportElement.css(viewportElementResetCSS);
if (hideOverflow4CorrectMeasuring)
_contentElement.css(strOverflow, strHidden);
if(!_nativeScrollbarStyling) {
var viewportElementResetCSS = {};
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;
setTopRightBottomLeft(viewportElementResetCSS, _strEmpty);
_viewportElement.css(viewportElementResetCSS);
}
//measure several sizes:
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
var contentMeasureElementGuaranty = _restrictedMeasuring && !hideOverflow4CorrectMeasuring ? _viewportElementNative : contentMeasureElement;
var contentSize = {
//use clientSize because natively overlaidScrollbars add borders
w: textareaDynOrigSize.w || contentMeasureElement[LEXICON.cW],
h: textareaDynOrigSize.h || contentMeasureElement[LEXICON.cH]
};
var scrollSize = {
w: MATH.max(contentMeasureElement[LEXICON.sW], contentMeasureElementGuaranty[LEXICON.sW]),
h: MATH.max(contentMeasureElement[LEXICON.sH], contentMeasureElementGuaranty[LEXICON.sH])
w: contentMeasureElement[LEXICON.sW],
h: contentMeasureElement[LEXICON.sH]
};
//apply the correct viewport style and measure viewport size
viewportElementResetCSS[_strBottom] = wasHeightAuto ? _strEmpty : resetBottomTmp;
viewportElementResetCSS[isRTLLeft] = wasWidthAuto ? _strEmpty : resetXTmp;
_viewportElement.css(viewportElementResetCSS);
if(!_nativeScrollbarStyling) {
viewportElementResetCSS[_strBottom] = wasHeightAuto ? _strEmpty : resetBottomTmp;
viewportElementResetCSS[isRTLLeft] = wasWidthAuto ? _strEmpty : resetXTmp;
_viewportElement.css(viewportElementResetCSS);
}
_viewportSize = getViewportSize();
//measure and correct several sizes
@@ -2656,16 +2672,12 @@
//measure again, but this time all correct sizes:
var contentScrollSize = {
w: MATH.max(contentMeasureElement[LEXICON.sW], contentMeasureElementGuaranty[LEXICON.sW]),
h: MATH.max(contentMeasureElement[LEXICON.sH], contentMeasureElementGuaranty[LEXICON.sH])
w: contentMeasureElement[LEXICON.sW],
h: contentMeasureElement[LEXICON.sH],
};
contentScrollSize.c = contentSizeChanged = checkCacheAutoForce(contentScrollSize, _contentScrollSizeCache);
_contentScrollSizeCache = contentScrollSize;
//remove overflow hidden to restore overflow
if (hideOverflow4CorrectMeasuring)
_contentElement.css(strOverflow, _strEmpty);
//refresh viewport size after correct measuring
_viewportSize = getViewportSize();
@@ -3233,6 +3245,8 @@
_paddingElementNative = _paddingElement[0];
_viewportElementNative = _viewportElement[0];
_contentElementNative = _contentElement[0];
updateViewportAttrsFromTarget();
}
else {
if (_domExists && _initialized) {
@@ -4449,7 +4463,7 @@
var doUpdateAuto;
var mutHost;
var mutContent;
if (isString) {
if (force === _strAuto) {
attrsChanged = meaningfulAttrsChanged();
@@ -5331,7 +5345,7 @@
initBodyScroll.t = MATH.max(_targetElement[_strScrollTop](), _htmlElement[_strScrollTop](), _windowElement[_strScrollTop]());
bodyMouseTouchDownListener = function () {
_viewportElement.removeAttr('tabindex');
_viewportElement.removeAttr(LEXICON.ti);
setupResponsiveEventListener(_viewportElement, _strMouseTouchDownEvent, bodyMouseTouchDownListener, true, true);
}
}
@@ -5345,8 +5359,8 @@
setupStructureEvents();
setupScrollbarEvents(true);
setupScrollbarEvents(false);
setupScrollbarCornerEvents();
setupScrollbarCornerEvents();
//create mutation observers
createMutationObservers();
@@ -5360,7 +5374,7 @@
//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 && _viewportElementNative.focus) {
//set a tabindex to make the viewportElement focusable
_viewportElement.attr('tabindex', '-1');
_viewportElement.attr(LEXICON.ti, '-1');
_viewportElementNative.focus();
/* the tabindex has to be removed due to;
js/jquery.overlayScrollbars.min.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
package-lock.json
Generated
+19 -38
View File
@@ -1,6 +1,6 @@
{
"name": "overlayscrollbars",
"version": "1.10.0",
"version": "1.11.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -524,9 +524,9 @@
"dev": true
},
"commander": {
"version": "2.20.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
"integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==",
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true
},
"component-emitter": {
@@ -1085,8 +1085,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
@@ -1107,14 +1106,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -1129,20 +1126,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@@ -1259,8 +1253,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@@ -1272,7 +1265,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -1287,7 +1279,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -1295,14 +1286,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -1321,7 +1310,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -1402,8 +1390,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@@ -1415,7 +1402,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -1501,8 +1487,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -1538,7 +1523,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -1558,7 +1542,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -1602,14 +1585,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},
@@ -3264,12 +3245,12 @@
"dev": true
},
"uglify-js": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.0.tgz",
"integrity": "sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg==",
"version": "3.8.0",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.8.0.tgz",
"integrity": "sha512-ugNSTT8ierCsDHso2jkBHXYrU8Y5/fY2ZUprfrJUiD7YpuFvV4jODLFmb3h4btQjqr5Nh4TX4XtgDfCU1WdioQ==",
"dev": true,
"requires": {
"commander": "~2.20.0",
"commander": "~2.20.3",
"source-map": "~0.6.1"
},
"dependencies": {
package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "overlayscrollbars",
"version": "1.10.3",
"version": "1.11.0",
"description": "A javascript scrollbar plugin which hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.",
"keywords": [
"overlayscrollbars",
@@ -40,6 +40,6 @@
"csso": "^3.5.1",
"gulp": "^4.0.2",
"shelljs": "^0.8.3",
"uglify-js": "^3.6.0"
"uglify-js": "^3.8.0"
}
}