Next.js+Tailwind等距滚动Marquee组件右侧溢出问题求助

我用Next.js和Tailwind CSS开发了一个等距滚动的Marquee跑马灯组件，目前组件能实现滚动效果，但页面始终出现右侧横向滚动条，需要保留跑马灯功能的同时消除这个溢出问题。

组件代码 #

<div class="marquee isometric md:-left-[330px] -left-[130px] mt-[50px] md:mt-[100px] absolute py-8 ">
    <div class="marquee-content scroll">
        <motion.div className="h-[410px] p-4  rounded-xl bg-gray-200">
            <Image src={Gym1} className="object-cover w-full h-full rounded-xl " />
        </motion.div>
        <motion.div className="h-[410px] p-4  rounded-xl bg-gray-200">
            <Image src={Gym2} className="object-cover w-full h-full rounded-xl " />
        </motion.div>
        <motion.div className="h-[410px] p-4  rounded-xl bg-gray-200">
            <Image src={Img3} className="object-cover w-full h-full rounded-xl " />
        </motion.div>
        <motion.div className="h-[410px] p-4  rounded-xl bg-gray-200">
            <Image src={Img4} className="object-cover w-full h-full rounded-xl " />
        </motion.div>
        <motion.div className="h-[410px] p-4  rounded-xl bg-gray-200">
            <Image src={Img5} className="object-cover w-full h-full rounded-xl " />
        </motion.div>
        <motion.div className="h-[410px] p-4  rounded-xl bg-gray-200">
            <Image src={Img6} className="object-cover w-full h-full rounded-xl " />
        </motion.div>
        <motion.div className="h-[410px] p-4  rounded-xl bg-gray-200">
            <Image src={Img7} className="object-cover w-full h-full rounded-xl " />
        </motion.div>
        <motion.div className="h-[410px] p-4  rounded-xl bg-gray-200">
            <Image src={Img8} className="object-cover w-full h-full rounded-xl " />
        </motion.div>
        <motion.div className="h-[410px] p-4  rounded-xl bg-gray-200">
            <Image src={Img9} className="object-cover w-full h-full rounded-xl " />
        </motion.div>
    </div>
    <div class="marquee-content scroll">
        <motion.div className="h-[410px] p-4  rounded-xl bg-gray-200">
            <Image src={Gym1} className="object-cover w-full h-full rounded-xl " />
        </motion.div>
        <motion.div className="h-[410px] p-4  rounded-xl bg-gray-200">
            <Image src={Gym2} className="object-cover w-full h-full rounded-xl " />
        </motion.div>
        <motion.div className="h-[410px] p-4  rounded-xl bg-gray-200">
            <Image src={Img3} className="object-cover w-full h-full rounded-xl " />
        </motion.div>
        <motion.div className="h-[410px] p-4  rounded-xl bg-gray-200">
            <Image src={Img4} className="object-cover w-full h-full rounded-xl " />
        </motion.div>
        <motion.div className="h-[410px] p-4  rounded-xl bg-gray-200">
            <Image src={Img5} className="object-cover w-full h-full rounded-xl " />
        </motion.div>
        <motion.div className="h-[410px] p-4  rounded-xl bg-gray-200">
            <Image src={Img6} className="object-cover w-full h-full rounded-xl " />
        </motion.div>
        <motion.div className="h-[410px] p-4  rounded-xl bg-gray-200">
            <Image src={Img7} className="object-cover w-full h-full rounded-xl " />
        </motion.div>
        <motion.div className="h-[410px] p-4  rounded-xl bg-gray-200">
            <Image src={Img8} className="object-cover w-full h-full rounded-xl " />
        </motion.div>
        <motion.div className="h-[410px] p-4  rounded-xl bg-gray-200">
            <Image src={Img9} className="object-cover w-full h-full rounded-xl " />
        </motion.div>
    </div>
</div>

相关CSS类定义 #

.isometric {
  transform: matrix(1, 0.27, -0.8, 0.7, 0, 0);
}

.marquee {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 150%;
  margin-bottom: 1rem;
  grid-column-gap: 1rem;
}

.marquee-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  grid-column-gap: 1rem;
}

.scroll {
  animation: scroll 65s linear infinite;
}

解决方案 #

1. 添加父容器约束溢出 #

给Marquee组件包裹一个相对定位的容器，利用overflow-x:hidden裁剪超出视口的部分，避免触发页面横向滚动条：

<div className="relative overflow-x-hidden w-full">
  {/* 原Marquee组件代码 */}
  <div class="marquee isometric md:-left-[330px] -left-[130px] mt-[50px] md:mt-[100px] absolute py-8 ">
    {/* ... 内部内容不变 ... */}
  </div>
</div>

2. 调整Marquee的CSS属性 #

修改.marquee的宽度和定位属性，配合父容器的裁剪逻辑：

.isometric {
  transform: matrix(1, 0.27, -0.8, 0.7, 0, 0);
  /* 可选：固定变换基点，避免位置偏移异常 */
  transform-origin: top left;
}

.marquee {
  display: flex;
  overflow: hidden;
  /* 改为内容自适应宽度，避免固定150%导致的不必要溢出 */
  width: fit-content;
  margin-bottom: 1rem;
  gap: 1rem;
  /* 添加right:0，确保元素右侧被父容器裁剪 */
  right: 0;
}

.marquee-content {
  display: flex;
  flex: 0 0 auto;
  gap: 1rem;
}

.scroll {
  animation: scroll 65s linear infinite;
}

/* 补充滚动动画关键帧（若之前未定义） */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

原理说明 #

• 父容器的relative定位为内部绝对定位的Marquee提供参考，overflow-x:hidden直接裁剪掉组件超出视口的部分，不会触发页面滚动条。
• 将.marquee的宽度改为fit-content，让宽度由内部内容决定，避免固定150%导致的无意义溢出，配合right:0确保元素右侧被父容器完全裁剪。
• 可选的transform-origin保证等距变换的基点符合预期，避免元素位置偏移异常。

内容的提问来源于stack exchange，提问作者X Y