如何解决如何在材质 ui 中将视图移动到手风琴顶部
我在我的 reactjs 项目中使用了材质 ui 手风琴。在这里,当手风琴打开时我面临一个问题,我想专注于手风琴详细内容的顶部。我尝试添加滚动到顶部,但这似乎不起作用。
这是我的代码
<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",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>
)}
这里有变化
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",});
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。