Почему увеличенный div не переполняется по оси Y ⇐ CSS

[Anonymous]

Я пытаюсь создать эффект, подобный этому
Это мой файл App.jsx:

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

import logo from "./logo.svg";
import "./App.css";
import "./components/header/Navbar.jsx";
import Navbar from "./components/header/Navbar.jsx";
import Hero from "./components/hero/Hero.jsx";
import List from "./components/list/List.jsx";

function App() {
return (







);
}

export default App;

Это мой List.jsx

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

import "../../App.css";
import Card from "./Card.jsx"
import { useState, useRef, useEffect } from "react";

function List(props) {
console.log("List component rendered");
const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const [scrollCount, setScrollCount] = useState(0);
const myRef = useRef(null);
const executeForwardScroll = () => {
const vwPixelValue = window.innerWidth / 100;
const scrollLeftValue = 100 * (scrollCount + 1) * vwPixelValue;

myRef.current.scroll({
top: 0,
left: scrollLeftValue,
behavior: "smooth",
});
setScrollCount(prevCount => prevCount + 1);
console.log(scrollCount)
}

function executeBackwardScroll(){
const vwPixelValue = window.innerWidth / 100;
const scrollLeftValue = 100 * (scrollCount - 1) * vwPixelValue;

myRef.current.scroll({
top: 0,
left: scrollLeftValue,
behavior: "smooth",
});

setScrollCount(prevCount => prevCount - 1);
console.log(scrollCount);
}
return (


List Heading















 0 ? "bg-black bg-opacity-50 absolute w-[4vw] h-[7.75vw] left-0 top-[2.945vw] z-20" : "hidden"} onClick={executeBackwardScroll}>




);
}

export default List;

А это компонент «Карточка»:

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

import "../list/Card"
import { useState, useRef } from "react";

function Card(props) {

const [isHovered, setIsHovered] = useState(false);

const handleMouseEnter = () => {
setIsHovered(true);
};

const handleMouseLeave = () => {
setIsHovered(false);
};

return(


{props.num}


);
}

export default Card;

Если я оставлю прокрутку или скрытие переполнения элемента div myRef в списке, преобразованные карты при наведении не будут видны полностью по оси Y, независимо от того, что я делаю, и если я скрою переполнение для всего App.jsx, функция прокрутки не будет работать. что я могу сделать, чтобы добиться желаемого эффекта. Все используемые классы представляют собой CSS попутного ветра.

Подробнее здесь: https://stackoverflow.com/questions/783 ... the-y-axis