From 915613e90a3e99083e61dd9f7892ebd66973a685 Mon Sep 17 00:00:00 2001
From: Bram van der Holst <bram@reachdigital.nl>
Date: Mon, 26 Oct 2026 15:51:35 +0100
Subject: [PATCH 1/2] Check that the Scroller calls the onMouseDown of its
 props

---
 .../hooks/useScroller.test.tsx                | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 packages/framer-scroller/hooks/useScroller.test.tsx

diff --git a/packages/framer-scroller/hooks/useScroller.test.tsx b/packages/framer-scroller/hooks/useScroller.test.tsx
new file mode 100644
index 0000000000..2b19392693
--- /dev/null
+++ b/packages/framer-scroller/hooks/useScroller.test.tsx
@@ -0,0 +1,41 @@
+// @vitest-environment happy-dom
+
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterAll, beforeAll, expect, it, vi } from 'vitest'
+import { Scroller } from '../components/Scroller'
+import { ScrollerProvider } from '../components/ScrollerProvider'
+
+beforeAll(() => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+})
+
+afterAll(() => {
+  Reflect.deleteProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT')
+})
+
+it('calls the onMouseDown of its props', () => {
+  const onMouseDown = vi.fn()
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  const root = createRoot(container)
+
+  act(() =>
+    root.render(
+      <ScrollerProvider>
+        <Scroller onMouseDown={onMouseDown}>
+          <div>Item</div>
+        </Scroller>
+      </ScrollerProvider>,
+    ),
+  )
+  act(() => {
+    container
+      .querySelector('.Scroller-root')
+      ?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+  })
+  act(() => root.unmount())
+  container.remove()
+
+  expect(onMouseDown).toHaveBeenCalledTimes(1)
+})

From a2887415f91b7b2cb36df0c7deda0248119a5c1c Mon Sep 17 00:00:00 2001
From: Bram van der Holst <bram@reachdigital.nl>
Date: Mon, 26 Oct 2026 16:02:12 +0100
Subject: [PATCH 2/2] Call the onMouseDown of the Scroller props

---
 .changeset/scroller-on-mouse-down.md          | 5 +++++
 packages/framer-scroller/hooks/useScroller.ts | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 .changeset/scroller-on-mouse-down.md

diff --git a/.changeset/scroller-on-mouse-down.md b/.changeset/scroller-on-mouse-down.md
new file mode 100644
index 0000000000..55ee805c7b
--- /dev/null
+++ b/.changeset/scroller-on-mouse-down.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/framer-scroller': patch
+---
+
+`useScroller` calls the `onMouseDown` of its props. It replaced it with its own handler, so a click on an image of `SidebarGallery` did not open the zoom.
diff --git a/packages/framer-scroller/hooks/useScroller.ts b/packages/framer-scroller/hooks/useScroller.ts
index 40de064ffa..e03ab0d386 100644
--- a/packages/framer-scroller/hooks/useScroller.ts
+++ b/packages/framer-scroller/hooks/useScroller.ts
@@ -93,6 +93,7 @@ export function useScroller<
       if (event.target.querySelector(':scope > input, :scope > textarea')) return
     }
     event.preventDefault()
+    divProps.onMouseDown?.(event as never)
   }
 
   const onPan: PanHandlers['onPan'] = (event, info: PanInfo) => {