如何在材质 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 (将#修改为@）