improvement on getting original scroll position

KingSora · Jun 20, 2024 · 932b30c · 932b30c
1 parent 140c253
commit 932b30c
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts
@@ -21,6 +21,8 @@ import {
  wnd,
  focusElement,
  stopAndPrevent,
+ getOffsetSize,
+ getScrollSize,
 } from '~/support';
 import {
  dataAttributeHost,
@@ -106,6 +108,12 @@ export const createStructureSetupElements = (
  createNewDiv,
  defaultContentInitialization
  );
+ const elementHasOverflow = (elm: HTMLElement) => {
+ const offsetSize = getOffsetSize(elm);
+ const scrollSize = getScrollSize(elm);
+
+ return scrollSize.w - offsetSize.w > 0 || scrollSize.h - offsetSize.h > 0;
+ };
  const possibleViewportElement = generateViewportElement(viewportInitialization);
  const viewportIsTarget = possibleViewportElement === targetElement;
  const viewportIsTargetBody = viewportIsTarget && isBody;
@@ -124,9 +132,10 @@ export const createStructureSetupElements = (
  (elm) => isHTMLElement(elm) && !parent(elm) && elm
  );
  const elementIsGenerated = (elm: HTMLElement | false) => elm && inArray(generatedElements, elm);
- const originalNonBodyScrollOffsetElement = elementIsGenerated(viewportElement)
- ? targetElement
- : viewportElement;
+ const originalNonBodyScrollOffsetElement =
+ !elementIsGenerated(viewportElement) && elementHasOverflow(viewportElement)
+ ? viewportElement
+ : targetElement;
 
  const evaluatedTargetObj: StructureSetupElementsObj = {
  _target: targetElement,

diff --git a/...s/overlayscrollbars/test/jest-jsdom/setups/structureSetup/structureSetup.elements.test.ts b/...s/overlayscrollbars/test/jest-jsdom/setups/structureSetup/structureSetup.elements.test.ts
@@ -380,7 +380,11 @@ const assertCorrectSetupElements = (
  } else {
  const resolvedViewport = resolveInitialization([target], viewportInitialization);
 
- if (isHTMLElement(resolvedViewport)) {
+ if (
+ isHTMLElement(resolvedViewport) &&
+ (resolvedViewport.offsetHeight - resolvedViewport.scrollHeight > 0 ||
+ resolvedViewport.offsetWidth - resolvedViewport.scrollWidth)
+ ) {
  expect(_originalScrollOffsetElement).toBe(resolvedViewport);
  } else {
  expect(_originalScrollOffsetElement).toBe(target);

diff --git a/website/components/Html.tsx b/website/components/Html.tsx
@@ -2,10 +2,20 @@
 import { useEffect } from 'react';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import { UAParser } from 'ua-parser-js';
+import { ClickScrollPlugin, OverlayScrollbars } from 'overlayscrollbars';
 import type { ComponentPropsWithoutRef } from 'react';
 
+OverlayScrollbars.plugin(ClickScrollPlugin);
+
 export const Html = ({ children }: ComponentPropsWithoutRef<'html'>) => {
- const [initialize] = useOverlayScrollbars({ defer: true });
+ const [initialize] = useOverlayScrollbars({
+ defer: true,
+ options: {
+ scrollbars: {
+ clickScroll: true,
+ },
+ },
+ });
 
  useEffect(() => {
  const ua = new UAParser();