ScrollintoView - React Working, но прокручивает центр элемента перед его щелчком (нуждается в центре после клика) ⇐ Javascript

[Anonymous]

Я продолжаю работать над этим и становиться лучше в React. Я потратил несколько дней, пытаясь выяснить, почему он делает это, поэтому я здесь, чтобы попросить какую-либо понимание- как бы я запустил функцию выполнения CreeputeCroll, которую я выполнил, чтобы выполнить после того, как элемент был нажат вместо того, чтобы сосредоточить элемент до того, как его щелкнули? < /P>
или я просто нацелен на неправильный элемент? Это страница галереи, которая показывает изображения искусства, и когда вы нажимаете на одно из изображений, она открывает модаль - и появляется модал, который я хочу сосредоточить на странице, чтобы прокрутить. Любое понимание очень ценится - спасибо !!import { useState, useRef } from "react";
import { PropTypes } from "prop-types";
import GalleryData from "../data/GalleryData";
import styles from "../components/GalleryList.module.css";

function GalleryList() {
return (


{GalleryData.map((gallery) => (

))}


);
}

function Gallery({ galleryObj }) {
const [isOpenModal, setIsOpenModal] = useState(null);

Gallery.propTypes = {
galleryObj: PropTypes.shape({
name: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
bulletName: PropTypes.string.isRequired,
bulletPoints: PropTypes.string.isRequired,
bulletPoints2: PropTypes.string.isRequired,
imagePath: PropTypes.bool.isRequired,
}),
};
const myRef = useRef(null);

const executeScroll = () => {
const returnScroll = document.body.scrollHeight / 2;
// console.log(returnScroll);
const test = document.getElementById("box");
let testBox = test.getBoundingClientRect();
let testBoxHeight = testBox.height;
console.log(testBox);
console.log(returnScroll);
let testPreview = returnScroll - testBoxHeight;
console.log(testPreview);
let testAgain = returnScroll - window.scrollY;
console.log(testAgain);
let finalExam = returnScroll + testAgain;
console.log(finalExam);
console.log(myRef);
myRef.current.scrollIntoView({ behavior: 'smooth', block: 'center',}) // window.scrollTo({ top: testAgain, behavior: "smooth" });

// test.scrollIntoView({ behavior: 'smooth', block: 'center' });
// its currently centering div placement before it clicks open. need to find a way to center it AFTER modal opens
}

return (
onClick={() => setIsOpenModal(!isOpenModal)}
className={`${isOpenModal ? styles["overlay"] : styles["overlayNone"]}`}
ref={myRef}

>

[img]{galleryObj.imagePath}
className={`${
isOpenModal ? styles["galleryPrevModal"] : styles["galleryPrev"]
}`}
/>


{galleryObj.name}


{galleryObj.description}


{galleryObj.bulletName}

• {galleryObj.bulletPoints}
• {galleryObj.bulletPoints2}

);
}

export default GalleryList;


Подробнее здесь: https://stackoverflow.com/questions/796 ... lement-bef