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

add flexboxglue content box fix

Browse Source
This commit is contained in:
Rene Haas
2021-03-31 13:06:08 +02:00
parent 40da2be1da
commit ea6794eca8
2 changed files with 41 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts
+37 -13
View File
@@ -1,8 +1,7 @@
import { TRBL, CacheValues, each, push, OptionsValidated, hasOwnProperty } from 'support';
import { XY, TRBL, CacheValues, each, push, OptionsValidated, hasOwnProperty, isNumber, scrollLeft, scrollTop } from 'support';
import { Options } from 'options';
import { getEnvironment } from 'environment';
import { StructureSetup } from 'setups/structureSetup';
import { createStructureLifecycle } from 'lifecycles/structureLifecycle';
import { createPaddingLifecycle } from 'lifecycles/paddingLifecycle';
import { createOverflowLifecycle } from 'lifecycles/overflowLifecycle';
import { createSizeObserver } from 'observers/sizeObserver';
@@ -47,6 +46,8 @@ export interface LifecycleHub {
_setPadding(newPadding?: TRBL | null): void;
_getPaddingStyle(): StyleObject;
_setPaddingStyle(newPaddingStlye?: StyleObject | null): void;
_getViewportOverflowScroll(): XY<boolean>;
_setViewportOverflowScroll(newViewportOverflowScroll: XY<boolean>): void;
}
const getPropByPath = <T>(obj: any, path: string): T =>
@@ -60,6 +61,10 @@ const viewportPaddingStyleFallback: StyleObject = {
marginBottom: 0,
marginLeft: 0,
};
const viewportOverflowScrollFallback: XY<boolean> = {
x: false,
y: false,
};
const directionIsRTLCacheValuesFallback: CacheValues<boolean> = {
_value: false,
_previous: false,
@@ -74,7 +79,8 @@ const heightIntrinsicCacheValuesFallback: CacheValues<boolean> = {
export const createLifecycleHub = (options: Options, structureSetup: StructureSetup): LifecycleHubInstance => {
let padding = paddingFallback;
let viewportPaddingStyle = viewportPaddingStyleFallback;
const { _host, _viewport, _content } = structureSetup._targetObj;
let viewportOverflowScroll = viewportOverflowScrollFallback;
const { _host, _viewport, _content, _contentArrange } = structureSetup._targetObj;
const {
_nativeScrollbarStyling,
_flexboxGlue,
@@ -90,16 +96,24 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe
padding = newPadding || paddingFallback;
},
_getPaddingStyle: () => viewportPaddingStyle,
_setPaddingStyle(newPaddingStlye: StyleObject) {
_setPaddingStyle(newPaddingStlye) {
viewportPaddingStyle = newPaddingStlye || viewportPaddingStyleFallback;
},
_getViewportOverflowScroll: () => viewportOverflowScroll,
_setViewportOverflowScroll(newViewportOverflowScroll) {
viewportOverflowScroll = newViewportOverflowScroll || viewportOverflowScrollFallback;
},
};
// push(lifecycles, createStructureLifecycle(instance));
push(lifecycles, createPaddingLifecycle(instance));
push(lifecycles, createOverflowLifecycle(instance));
const runLifecycles = (updateHints?: Partial<LifecycleUpdateHints> | null, changedOptions?: OptionsValidated<Options> | null, force?: boolean) => {
const updateLifecycles = (
updateHints?: Partial<LifecycleUpdateHints> | null,
changedOptions?: OptionsValidated<Options> | null,
force?: boolean
) => {
let {
_directionIsRTL,
_heightIntrinsic,
@@ -116,6 +130,9 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe
_value: getPropByPath(options, path),
_changed: force || getPropByPath(changedOptions, path) !== undefined,
});
const adjustScrollOffset = _contentArrange || !_flexboxGlue;
const scrollOffsetX = adjustScrollOffset && scrollLeft(_viewport);
const scrollOffsetY = adjustScrollOffset && scrollTop(_viewport);
each(lifecycles, (lifecycle) => {
const {
@@ -142,24 +159,31 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe
_contentMutation = adaptiveContentMutation || _contentMutation;
_paddingStyleChanged = adaptivePaddingStyleChanged || _paddingStyleChanged;
});
if (isNumber(scrollOffsetX)) {
scrollLeft(_viewport, scrollOffsetX);
}
if (isNumber(scrollOffsetY)) {
scrollTop(_viewport, scrollOffsetY);
}
};
const onSizeChanged = (directionIsRTL?: CacheValues<boolean>) => {
const sizeChanged = !directionIsRTL;
runLifecycles({
updateLifecycles({
_directionIsRTL: directionIsRTL,
_sizeChanged: sizeChanged,
});
};
const onTrinsicChanged = (heightIntrinsic: CacheValues<boolean>) => {
runLifecycles({
updateLifecycles({
_heightIntrinsic: heightIntrinsic,
});
};
const onHostMutation = () => {
// TODO: rAF only here because IE
requestAnimationFrame(() => {
runLifecycles({
updateLifecycles({
_hostMutation: true,
});
});
@@ -167,7 +191,7 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe
const onContentMutation = () => {
// TODO: rAF only here because IE
requestAnimationFrame(() => {
runLifecycles({
updateLifecycles({
_contentMutation: true,
});
});
@@ -201,16 +225,16 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe
*/
});
const updateAll = (changedOptions?: OptionsValidated<Options> | null, force?: boolean) => {
runLifecycles(null, changedOptions, force);
const update = (changedOptions?: OptionsValidated<Options> | null, force?: boolean) => {
updateLifecycles(null, changedOptions, force);
};
const envUpdateListener = updateAll.bind(null, null, true);
const envUpdateListener = update.bind(null, null, true);
addEnvironmentListener(envUpdateListener);
console.log('flexboxGlue', _flexboxGlue);
return {
_update: updateAll,
_update: update,
_destroy() {
removeEnvironmentListener(envUpdateListener);
},
packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
+4 -13
View File
@@ -7,14 +7,11 @@ import {
scrollSize,
CacheValues,
equalWH,
scrollLeft,
scrollTop,
addClass,
removeClass,
clientSize,
offsetSize,
getBoundingClientRect,
topRightBottomLeft,
} from 'support';
import { LifecycleHub, Lifecycle } from 'lifecycles/lifecycleHub';
import { getEnvironment } from 'environment';
@@ -74,9 +71,6 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
});
const fixFlexboxGlue = (viewportOverflowState: ViewportOverflowState, heightIntrinsic: boolean) => {
const offsetLeft = scrollLeft(_viewport);
const offsetTop = scrollTop(_viewport);
style(_viewport, {
maxHeight: '',
});
@@ -84,17 +78,14 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
if (heightIntrinsic) {
const { _overflowScroll, _scrollbarsHideOffset } = viewportOverflowState;
const hostBCR = getBoundingClientRect(_host);
// TODO: change to offset size - client size calculation.
const border = topRightBottomLeft(_host, 'border', 'width');
const hostOffsetSize = offsetSize(_host);
const hostClientSize = clientSize(_host);
const clientSizeWithoutRounding = hostClientSize.h + (hostBCR.height - hostOffsetSize.h);
style(_viewport, {
maxHeight: hostBCR.height - (border.t + border.b) + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0),
maxHeight: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0),
});
}
scrollLeft(_viewport, offsetLeft);
scrollTop(_viewport, offsetTop);
};
const getViewportOverflowState = (showNativeOverlaidScrollbars: boolean, viewportStyleObj?: StyleObject): ViewportOverflowState => {