feat: add NoScroll module configuration (fix #180)

docs/documentation.md

@@ -211,6 +211,25 @@ import "yet-another-react-lightbox/styles.css";
         </ul>
       </td>
     </tr>
+    <tr>
+      <td>noScroll</td>
+      <td>
+        &#123;<br />
+        &nbsp;&nbsp;disabled?: boolean;<br />
+        &#125;
+      </td>
+      <td>
+        <p>
+          NoScroll module settings. The NoScroll module is responsible for hiding 
+          the vertical scrollbar and preventing document `<body/>` from scrolling
+          underneath the lightbox. However, in some cases, this functionality may cause 
+          undesired side effects, so you may want to disable this feature.
+        </p> 
+        <ul>
+          <li>`disabled` - if `true`, the NoScroll module functionality is disabled</li>
+        </ul>
+      </td>
+    </tr>
     <tr>
       <td>on</td>
       <td>

src/Lightbox.tsx

@@ -39,6 +39,7 @@ export function Lightbox({
     render,
     toolbar,
     controller,
+    noScroll,
     on,
     plugins,
     slides,
@@ -51,6 +52,7 @@ export function Lightbox({
         render: defaultRender,
         toolbar: defaultToolbar,
         controller: defaultController,
+        noScroll: defaultNoScroll,
         on: defaultOn,
         slides: defaultSlides,
         index: defaultIndex,
@@ -79,6 +81,7 @@ export function Lightbox({
         render: { ...defaultRender, ...render },
         toolbar: { ...defaultToolbar, ...toolbar },
         controller: { ...defaultController, ...controller },
+        noScroll: { ...defaultNoScroll, ...noScroll },
         on: { ...defaultOn, ...on },
         ...restDefaultProps,
         ...restProps,

src/modules/NoScroll.tsx

@@ -30,10 +30,12 @@ function padScrollbar(element: HTMLElement, padding: number, rtl: boolean) {
     };
 }
 
-export function NoScroll({ children }: ComponentProps) {
+export function NoScroll({ noScroll: { disabled }, children }: ComponentProps) {
     const rtl = useRTL();
 
     useLayoutEffect(() => {
+        if (disabled) return () => {};
+
         const cleanup: (() => void)[] = [];
 
         const { body, documentElement } = document;
@@ -62,7 +64,7 @@ export function NoScroll({ children }: ComponentProps) {
 
             cleanup.forEach((clean) => clean());
         };
-    }, [rtl]);
+    }, [rtl, disabled]);
 
     return <>{children}</>;
 }

src/props.ts

@@ -36,6 +36,9 @@ export const LightboxDefaultProps: LightboxProps = {
         closeOnBackdropClick: false,
     },
     portal: {},
+    noScroll: {
+        disabled: false,
+    },
     on: {},
     styles: {},
     className: "",

src/types.ts

@@ -13,7 +13,7 @@ import {
 
 /** Lightbox external props */
 export type LightboxExternalProps = DeepPartial<
-    DeepPartial<DeepPartial<LightboxProps, "animation" | "toolbar">, "carousel", "imageProps">,
+    DeepPartial<DeepPartial<LightboxProps, "animation" | "toolbar" | "noScroll">, "carousel", "imageProps">,
     "controller",
     "ref"
 >;
@@ -44,6 +44,8 @@ export interface LightboxProps {
     controller: ControllerSettings;
     /** portal settings */
     portal: PortalSettings;
+    /** NoScroll module settings */
+    noScroll: NoScrollSettings;
     /** lifecycle callbacks */
     on: Callbacks;
     /** customization styles */
@@ -242,6 +244,12 @@ export interface PortalSettings {
     root?: DocumentFragment | Element | null;
 }
 
+/** NoScroll module settings */
+export interface NoScrollSettings {
+    /** if `true`, the NoScroll module functionality is disabled */
+    disabled: boolean;
+}
+
 /** Lightbox navigation action */
 export interface NavigationAction {
     /** navigate through the specified number of slides */