如何让Framer Motion的motion.div的x、y属性不再相对容器定位？

一、修复motion.div的x/y跟随偏差问题 #

问题核心是motion.div的x/y属性默认基于元素中心做偏移，而普通div的top/left是基于左上角定位，两者逻辑不一致导致偏差。按以下步骤调整：

1. 给motion.div设置position: fixed（脱离文档流，相对于视口定位），同时强制把变换原点改为左上角：

import { motion, useState, useEffect } from "framer-motion";

const CustomCursor = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      setPosition({ x: e.clientX, y: e.clientY });
    };
    window.addEventListener("mousemove", handleMouseMove);
    return () => window.removeEventListener("mousemove", handleMouseMove);
  }, []);

  return (
    <motion.div
      className="w-5 h-5 rounded-full bg-black"
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        pointerEvents: "none", // 避免干扰原生可交互元素
        transformOrigin: "top left", // 关键：将偏移基准改为左上角
      }}
      animate={{
        x: position.x,
        y: position.y,
      }}
      transition={{ type: "spring", damping: 20, stiffness: 300 }}
    />
  );
};

2. 直接监听window的mousemove事件获取clientX/clientY，无需依赖父元素的position属性。

二、修复右下角溢出问题 #

鼠标移到视口右下角时光标溢出，是因为光标自身有尺寸，x: clientX会让光标左上角对齐鼠标，导致部分超出视口。解决方法如下：

1. 先定义光标尺寸，再给x/y值减去尺寸的一半，让光标中心对齐鼠标：

// 假设光标宽高为20px（对应上面的w-5 h-5）
const CURSOR_SIZE = 20;

const handleMouseMove = (e: MouseEvent) => {
  setPosition({
    x: e.clientX - CURSOR_SIZE / 2,
    y: e.clientY - CURSOR_SIZE / 2,
  });
};

2. 额外添加范围限制，确保光标不会完全超出视口：

const handleMouseMove = (e: MouseEvent) => {
  const maxX = window.innerWidth - CURSOR_SIZE;
  const maxY = window.innerHeight - CURSOR_SIZE;
  setPosition({
    x: Math.max(0, Math.min(e.clientX - CURSOR_SIZE / 2, maxX)),
    y: Math.max(0, Math.min(e.clientY - CURSOR_SIZE / 2, maxY)),
  });
};

关键注意点 #

• 必须设置pointerEvents: "none"，否则光标会遮挡页面按钮、链接等可交互元素。
• 如果使用Tailwind CSS，可直接用transform-origin-top-left类替代行内的transformOrigin样式。

内容的提问来源于stack exchange，提问作者Baby Kottaram