Allow setup of scroll handler in useEffect phase to ensure refs are…

… populated

packages/framer-motion/src/value/use-scroll.ts

@@ -1,12 +1,14 @@
 import { scroll, ScrollOptions } from "@motionone/dom"
 import { RefObject } from "react"
 import { motionValue } from "."
-import { useIsomorphicLayoutEffect } from "../three-entry"
 import { useConstant } from "../utils/use-constant"
+import { useEffect } from "react"
+import { useIsomorphicLayoutEffect } from "../three-entry"
 
 interface UseScrollOptions extends Omit<ScrollOptions, "container" | "target"> {
     container?: RefObject<HTMLElement>
     target?: RefObject<HTMLElement>
+    layoutEffect?: boolean
 }
 
 const createScrollMotionValues = () => ({
@@ -19,11 +21,16 @@ const createScrollMotionValues = () => ({
 export function useScroll({
     container,
     target,
+    layoutEffect = true,
     ...options
 }: UseScrollOptions = {}) {
     const values = useConstant(createScrollMotionValues)
 
-    useIsomorphicLayoutEffect(() => {
+    const useLifecycleEffect = layoutEffect
+        ? useIsomorphicLayoutEffect
+        : useEffect
+
+    useLifecycleEffect(() => {
         return scroll(
             ({ x, y }) => {
                 values.scrollX.set(x.current)