import { useEffect } from "react"
export default function CarouselFixer() {
useEffect(() => {
// Wait for CMS content to render
const init = () => {
// Find all horizontally scrollable containers inside CMS content
const contents = document.querySelectorAll(".framer-text, [class*='content'], [class*='Content']")
contents.forEach((content) => {
const scrollEls = content.querySelectorAll("ul, ol, div")
scrollEls.forEach((el) => {
const htmlEl = el as HTMLElement
const style = window.getComputedStyle(htmlEl)
// Target only elements that overflow horizontally (the carousel)
if (
style.overflowX === "scroll" ||
style.overflowX === "auto" ||
htmlEl.scrollWidth > htmlEl.clientWidth
) {
attachScrollBehavior(htmlEl)
}
})
})
}
const attachScrollBehavior = (el: HTMLElement) => {
// Prevent double-attaching
if (el.dataset.scrollFixed) return
el.dataset.scrollFixed = "true"
el.style.cursor = "grab"
el.style.userSelect = "none"
el.style.webkitOverflowScrolling = "touch"
el.style.scrollbarWidth = "none"
let startX = 0
let scrollStart = 0
let isDown = false
let dragged = false
const onMouseDown = (e: MouseEvent) => {
isDown = true
dragged = false
startX = e.clientX
scrollStart = el.scrollLeft
el.style.cursor = "grabbing"
}
const onMouseMove = (e: MouseEvent) => {
if (!isDown) return
const dx = e.clientX - startX
if (Math.abs(dx) > 5) dragged = true
el.scrollLeft = scrollStart - dx
}
const onMouseUp = () => {
isDown = false
el.style.cursor = "grab"
}
const onClickCapture = (e: MouseEvent) => {
if (dragged) {
e.preventDefault()
e.stopImmediatePropagation()
dragged = false
}
}
const onWheel = (e: WheelEvent) => {
if (Math.abs(e.deltaX) > 0) {
e.preventDefault()
el.scrollLeft += e.deltaX
}
}
el.addEventListener("mousedown", onMouseDown)
el.addEventListener("mousemove", onMouseMove)
el.addEventListener("mouseup", onMouseUp)
el.addEventListener("mouseleave", onMouseUp)
el.addEventListener("click", onClickCapture, true)
el.addEventListener("wheel", onWheel, { passive: false })
}
// Try immediately, then retry after delays to catch late CMS renders
init()
setTimeout(init, 500)
setTimeout(init, 1500)
}, [])
// Renders nothing — invisible helper
return null
}
