Прокрутка не завершена на мобильных ⇐ CSS

[Anonymous]

У меня есть пара проектов, работающих с анимациями на основе прокрутки. Но всякий раз, когда я развертываю их и просматриваю их на мобильном устройстве, свиток никогда не достигает полной. Это всегда пара пикселей, и это делает анимацию неполной. Это один. < /P>

Код: Выделить всё

import { motion, useTransform, useScroll } from "motion/react";

export default function Cards() {
const imgs = [
"../img-18.jpg",
"../img-12.jpg",
"../img-9.jpg",
"../img-14.jpg",
"../img-13.jpg",
];

const colors = [
"bg-red-900",
"bg-blue-900",
"bg-teal-900",
"bg-green-900",
"bg-amber-900",
];

const content = [
{
title: "Title 1",
description: "Description 1",
img: imgs[0],
color: colors[0],
},
{
title: "Title 2",
description: "Description 2",
img: imgs[1],
color: colors[1],
},
{
title: "Title 3",
description: "Description 3",
img: imgs[2],
color: colors[2],
},
{
title: "Title 4",
description: "Description 4",
img: imgs[3],
color: colors[3],
},
{
title: "Title 5",
description: "Description 5",
img: imgs[4],
color: colors[4],
},
];

const { scrollYProgress } = useScroll();

return (

{content.map((item, index) => {
const originY = (index + 1) * window.innerHeight;

const translateCardY = useTransform(
scrollYProgress,
[0, (index + 1) / content.length],
[originY + "px", (index + 1) * 20 + "px"]
);

const scaleCard = useTransform(
scrollYProgress,
[0, 1],
[1, 0.8 + (index / content.length) * 0.2]
);

return (


[img]{item.img}
className="w-1/2 h-full object-cover"
/>

{item.title}
{item.description}



);
})}

);
}

Я попытался использовать динамические высоты просмотра, такие как SVH, LVH и DVH, но все же нет.

Подробнее здесь: https://stackoverflow.com/questions/795 ... -on-mobile