I am using material ui accordion in my reactjs project. Here I am facing a problem when accordion opens I want to focus on the top of accordion detail content. I tried adding scrolling it to top but this does not seems to be working.
Here are my Code
<Accordion
key={i + 1}
square
expanded={expandAccordion === `panel${i + 1}`}
onChange={handleChange(`panel${i + 1}`, item.id)}
>
<AccordionSummary
classes={{
root: classes.accordionSummery,
}}
id="accSummery"
className={classes.expansionPanel}
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1d-content"
id="panel1d-header"
>
<Typography noWrap={true} className={classes.itemHarm}>
<Chip
label={item.harm}
color={item.harmColor}
style={{
backgroundColor: `${item.harm_color}`,
width: "100%",
minWidth: "100px",
color: "#ffffff",
}}
/>
<Typography style={{ flex: 1 }} />
</Typography>
</AccordionSummary>
<AccordionDetails>
<div style={{ width: "100%" }}>
{dispensingDetailLoading ? (
<div
style={{
display: "flex",
width: "100%",
justifyContent: "center",
}}
>
<CircularProgress color="primary" />
</div>
) : (
<div ref={detailRef}>
<DetailComponent data={slide1} />
<DetailComponent data={slide2} />
<DetailComponent data={slide3} />
<DetailComponent data={slide4} />
<DetailComponent data={slide5} />
<DetailComponent data={slide6} />
<DetailComponent data={slide7} />
</div>
)}
Here is on change
const handleChange = (panel, id) => (event, newExpanded) => {
setExpanded(newExpanded ? panel : false);
// passing props to parent component
handleAccordionChange(id, newExpanded, panel);
if (newExpanded === true) {
getDispensingData(id);
setSlides(0);
}
onFocusView();
};
const detailRef = useRef();
const onFocusView = () => {
const scrollHeight = window.pageYOffset - window.innerHeight;
const h = window.scrollY - detailRef.current.clientHeight;
// const h = window.scrollY - detailRef.current.offsetTop;
console.log("detailRef", detailRef);
window.scrollTo({
top: scrollHeight ,
left: 0,
behavior: "smooth",
});
};
question from:
https://stackoverflow.com/questions/66061169/how-to-move-view-to-the-top-of-accordion-in-material-ui 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…