mirror of
https://github.com/tenrok/OverlayScrollbars.git
synced 2026-06-20 00:40:36 +03:00
optimize for ie11 and improve code
This commit is contained in:
@@ -61,11 +61,17 @@ module.exports = (testDir, mode = 'dev', onListening = null) => {
|
|||||||
dist,
|
dist,
|
||||||
},
|
},
|
||||||
versions: [
|
versions: [
|
||||||
{
|
mode === 'dev'
|
||||||
format: 'esm',
|
? {
|
||||||
generatedCode: 'es2015',
|
format: 'esm',
|
||||||
minifiedVersion: false,
|
generatedCode: 'es2015',
|
||||||
},
|
minifiedVersion: false,
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
format: 'iife',
|
||||||
|
generatedCode: 'es5',
|
||||||
|
minifiedVersion: false,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
extractStyle: false,
|
extractStyle: false,
|
||||||
rollup: {
|
rollup: {
|
||||||
|
|||||||
@@ -103,11 +103,13 @@ const createInteractiveScrollEvents = (
|
|||||||
const { _rtlScrollBehavior } = getEnvironment();
|
const { _rtlScrollBehavior } = getEnvironment();
|
||||||
const { _handle, _track, _scrollbar } = scrollbarStructure;
|
const { _handle, _track, _scrollbar } = scrollbarStructure;
|
||||||
const scrollLeftTopKey = `scroll${isHorizontal ? 'Left' : 'Top'}`;
|
const scrollLeftTopKey = `scroll${isHorizontal ? 'Left' : 'Top'}`;
|
||||||
|
const clientXYKey = `client${isHorizontal ? 'X' : 'Y'}`; // for pointer event (can't use xy because of IE11)
|
||||||
const widthHeightKey = isHorizontal ? 'width' : 'height';
|
const widthHeightKey = isHorizontal ? 'width' : 'height';
|
||||||
|
const leftTopKey = isHorizontal ? 'left' : 'top'; // for BCR (can't use xy because of IE11)
|
||||||
const whKey = isHorizontal ? 'w' : 'h';
|
const whKey = isHorizontal ? 'w' : 'h';
|
||||||
const xyKey = isHorizontal ? 'x' : 'y';
|
const xyKey = isHorizontal ? 'x' : 'y';
|
||||||
const getHandleOffset = (handleRect: DOMRect, trackRect: DOMRect) =>
|
const getHandleOffset = (handleRect: DOMRect, trackRect: DOMRect) =>
|
||||||
handleRect[xyKey] - trackRect[xyKey];
|
handleRect[leftTopKey] - trackRect[leftTopKey];
|
||||||
const createRelativeHandleMove =
|
const createRelativeHandleMove =
|
||||||
(mouseDownScroll: number, invertedScale: number) => (deltaMovement: number) => {
|
(mouseDownScroll: number, invertedScale: number) => (deltaMovement: number) => {
|
||||||
const { _overflowAmount } = structureSetupState();
|
const { _overflowAmount } = structureSetupState();
|
||||||
@@ -131,12 +133,12 @@ const createInteractiveScrollEvents = (
|
|||||||
scrollOffsetElement[scrollLeftTopKey] || 0,
|
scrollOffsetElement[scrollLeftTopKey] || 0,
|
||||||
1 / getScale(scrollOffsetElement)[xyKey]
|
1 / getScale(scrollOffsetElement)[xyKey]
|
||||||
);
|
);
|
||||||
const pointerDownOffset = pointerDownEvent[xyKey];
|
const pointerDownOffset = pointerDownEvent[clientXYKey];
|
||||||
const handleRect = getBoundingClientRect(_handle);
|
const handleRect = getBoundingClientRect(_handle);
|
||||||
const trackRect = getBoundingClientRect(_track);
|
const trackRect = getBoundingClientRect(_track);
|
||||||
const handleLength = handleRect[widthHeightKey];
|
const handleLength = handleRect[widthHeightKey];
|
||||||
const handleCenter = getHandleOffset(handleRect, trackRect) + handleLength / 2;
|
const handleCenter = getHandleOffset(handleRect, trackRect) + handleLength / 2;
|
||||||
const relativeTrackPointerOffset = pointerDownOffset - trackRect[xyKey];
|
const relativeTrackPointerOffset = pointerDownOffset - trackRect[leftTopKey];
|
||||||
const startOffset = isDragScroll ? 0 : relativeTrackPointerOffset - handleCenter;
|
const startOffset = isDragScroll ? 0 : relativeTrackPointerOffset - handleCenter;
|
||||||
|
|
||||||
const offFns = [
|
const offFns = [
|
||||||
@@ -144,7 +146,7 @@ const createInteractiveScrollEvents = (
|
|||||||
_passive: false,
|
_passive: false,
|
||||||
}),
|
}),
|
||||||
on(_track, 'pointermove', (pointerMoveEvent: PointerEvent) => {
|
on(_track, 'pointermove', (pointerMoveEvent: PointerEvent) => {
|
||||||
const relativeMovement = pointerMoveEvent[xyKey] - pointerDownOffset;
|
const relativeMovement = pointerMoveEvent[clientXYKey] - pointerDownOffset;
|
||||||
|
|
||||||
if (isDragScroll || instantClickScroll) {
|
if (isDragScroll || instantClickScroll) {
|
||||||
moveHandleRelative(startOffset + relativeMovement);
|
moveHandleRelative(startOffset + relativeMovement);
|
||||||
|
|||||||
+10
-3
@@ -135,10 +135,17 @@ if (!useContentElement) {
|
|||||||
const initObj = hasClass(document.body, 'tvp')
|
const initObj = hasClass(document.body, 'tvp')
|
||||||
? {
|
? {
|
||||||
target: target!,
|
target: target!,
|
||||||
viewport: target!,
|
elements: {
|
||||||
content: useContentElement,
|
viewport: target!,
|
||||||
|
content: useContentElement,
|
||||||
|
},
|
||||||
}
|
}
|
||||||
: { target: target!, content: useContentElement };
|
: {
|
||||||
|
target: target!,
|
||||||
|
elements: {
|
||||||
|
content: useContentElement,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
let updateCount = 0;
|
let updateCount = 0;
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
|||||||
Reference in New Issue
Block a user