Scrollintoview - Reagieren Sie das Arbeiten, scrollen Sie jedoch in die Mitte des Elements, bevor es geklickt wird (benö ⇐ JavaScript

[Anonymous]

Ich arbeite weiter daran und kann besser reagieren. Ich habe ein paar Tage damit verbracht, herauszufinden, warum es dies tut, also bin ich hier, um nach Einblicke zu fragen. Wie würde ich die executesCroll-Funktion auslösen, die ich gemacht habe, nachdem das Element geklickt wurde, anstatt das Element zu zentrieren, bevor es geklickt wurde? Es ist eine Galerie -Seite, die Kunstbilder anzeigt und wenn Sie auf eines der Bilder klicken, öffnen sie ein Modal - und das Modal, das auftaucht, ist die, die ich auf der Seite zentrieren möchte, um zu scrollen. Jeder Einblick wird sehr geschätzt - danke !! < /p>
(Außerdem werde ich die übermäßige Konsole.log -Linien entfernen, sobald ich das herausgefunden habe) < /p>

Code: Select all

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}

[list]
[*]
{galleryObj.bulletPoints}

[*]
{galleryObj.bulletPoints2}

[/list]



);
}

export default GalleryList;