Javascript 我的屏幕在单击时不滚动可能是什么问题？

我试图让我的屏幕移动到我的React/Ionic应用程序中新添加的元素位置，但无论我尝试什么，它都无法正常工作

我试过使用参考文献。我已经尝试过使用scrollTo（），ScrollIntoView-这可以移动屏幕，至少，我现在尝试使用IonContent Scroll函数，但它不会移动

我的目标是在单击按钮时让屏幕滚动到新的练习

这是我的密码

const AddWorkout: React.FC<Props & InjectedFormProps<{}, Props>> = (
  props: any
) => {
  const { pristine, submitting, handleSubmit } = props;
  const dispatch = useDispatch();
  const [duration, setDuration] = useState("");
  const [openPicker, setOpenPicker] = useState(false);

  return (
    <>
      <IonModal isOpen={props.show} animated backdropDismiss>
        <IonHeader>
          <IonToolbar>
            <IonTitle>Add A New Workout</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent
          scrollEvents={true}
          onIonScrollStart={_e => {
            console.log(_e);
          }}
          onIonScroll={() => { }}
          onIonScrollEnd={() => { }}
        >
          <form className="edit-modal">
            <IonGrid className="ion-no-margin">
              <IonRow>
                <Field
                  name="name"
                  title="Name"
                  component={ReduxFormInput}
                />
              </IonRow>
              <IonRow>
                <Field
                  name="date"
                  title="Date"
                  type="date"
                  values={new Date().toISOString()}
                  component={ReduxFormDateTime}
                />
              </IonRow>
              <IonRow>
                <Field
                  name="duration"
                  title="Duration"
                  duration={duration}
                  setDuration={setDuration}
                  openPicker={openPicker}
                  setOpenPicker={setOpenPicker}
                  component={ReduxDurationInput}
                />
              </IonRow>
              <FieldArray name="exercises" component={renderExercises} />
            </IonGrid>
          </form>
        </IonContent>
        <IonFooter>
          <IonRow>
            <IonCol>
              <IonButton expand="block" fill="clear" onClick={props.onCancel}>
                Cancel
              </IonButton>
            </IonCol>
            <IonCol>
              <IonButton
                expand="block"
                color="success"
                type="submit"
                onClick={handleSubmit(submitForm)}
                disabled={submitting || pristine}
              >
                Add Workout
              </IonButton>
            </IonCol>
          </IonRow>
        </IonFooter>
      </IonModal>
    </>
  );
};

const renderExercises = (props: WrappedFieldArrayProps<{}>) => {
  const { fields } = props;
  const { error, submitFailed } = props.meta;

  const groupIdx: Array<any> = fields.getAll()

  const moveExerciseUp = (from: number, to: number) => {
    if (from !== 0) {
      fields.move(from, to);
    }
  };

  const moveExerciseDown = (from: number, to: number) => {
    if (from !== fields.length - 1) {
      fields.move(from, to);
    }
  };

  const onMovePosition = (from: number, pos: number) => {
    if (pos > 0 && pos <= fields.length) {
      let breakOutOfLoop = false
      groupIdx.forEach((field, idx) => {
        // if one of the items has the correct group number,
        // assign the position to move to to that position
        if (field.group === pos && !breakOutOfLoop) {
          fields.move(from, idx)
          breakOutOfLoop = true
        }
        if (idx + 1 < fields.length && field.group > groupIdx[idx + 1].group) {
          fields.swap(idx, idx + 1)
        }
      })
    }
  }

  // THIS IS WHERE MY CODE IS!!!!!!!!!!!!!!!
  const gotoButton = () => {
    let y = document.getElementById("exerciseScroll")!.offsetTop;
    let content = document.querySelector("ion-content");
    content?.scrollToPoint(0, y);
  };

  return (
    <>
      <IonRow className="sticky-button">
        <IonCol>
          <IonButton
            type="button"
            expand="full"
            onClick={() => {
              fields.push({ group: fields.length + 1 })
              gotoButton()
            }}
          >
            Add Exercise
          </IonButton>
        </IonCol>
      </IonRow>
      <IonRow>
        <IonCol>
          {fields.map((exercise, idx) => {
            return (
              <div key={idx} className="ion-text-center" style={{ border: "1px solid black", borderRadius: "5px" }}>
                <IonRow className="ion-margin-vertical">
                  <IonCol size="6" className="ion-no-padding ion-margin-vertical ion-text-right">
                    <h4 style={{ margin: 0 }}>
                      Exercise Group #
                    </h4>
                  </IonCol>
                  <Field
                    name={`${exercise}.group`}
                    component={ReduxFormGroupInput}
                    position={idx}
                    parse={(value: string) => parseInt(value, 10)}
                    normalize={
                      (value: any, previousValue: any, allValues: any) => {
                        if (value < 0 || value > fields.length || isNaN(value)) {
                          return previousValue
                        }
                        if (idx > 0 && allValues.exercises[idx - 1].group - 1 < allValues.exercises[idx].group) {
                          let i = idx + 1;
                          for (i; i < fields.length; i++) {
                            if (groupIdx[i].group === groupIdx[idx].group) {
                              allValues.exercises[i].group--
                            }
                          }
                        }
                        return allValues.exercises[idx].group
                      }
                    }
                    change={onMovePosition}
                    className="ion-no-padding ion-float-left ion-text-center"
                  />
                  <IonCol>
                    <small style={{ color: "gray" }}>(Change the group # to create supersets)</small>
                  </IonCol>
                </IonRow>
                <IonRow>
                  <div style={{ position: "relative", marginRight: 30 }}>
                    <IonButton
                      fill="clear"
                      size="small"
                      style={{ position: "absolute", top: 10, left: 0 }}
                      onClick={() => moveExerciseUp(idx, idx - 1)}
                    >
                      <IonIcon icon={arrowUp} slot="icon-only" />
                    </IonButton>
                    <IonButton
                      fill="clear"
                      size="small"
                      style={{ position: "absolute", bottom: 0, left: 0 }}
                      onClick={() => moveExerciseDown(idx, idx + 1)}
                    >
                      <IonIcon icon={arrowDown} slot="icon-only" />
                    </IonButton>
                  </div>
                  <Field
                    name={`${exercise}.name`}
                    title="Exercise Name"
                    component={ReduxFormInput}
                  />
                </IonRow>
                <IonButton
                  onClick={() => fields.remove(idx)}
                  color="danger"
                  fill="clear"
                  size="small"
                >
                  REMOVE EXERCISE
                </IonButton>
                <FieldArray
                  name={`${exercise}.sets`}
                  props={null}
                  component={renderSets}
                />
              </div>
            );
          })}
          {submitFailed && error && (
            <span style={{ color: "red" }}>{error}</span>
          )}
        </IonCol>
      </IonRow>
      <div id="exerciseScroll" />
    </>
  );
};

const AddWorkout:React.FC=(
道具：有吗
) => {
const{pristine，submit，handleSubmit}=道具；
const dispatch=usedpatch（）；
const[duration，setDuration]=useState（“”）；
const[openPicker，setOpenPicker]=useState（false）；
返回(
添加新的训练
{
控制台日志（_e）；
}}
洋葱卷={（）=>{}
洋葱卷边={（）=>{}
>
取消
添加训练
);
};
const renderExercises=（道具：WrappedFieldArrayProps）=>{
常量{fields}=props；
const{error，submitFailed}=props.meta；
const groupIdx:Array=fields.getAll（）
const moveExerciseUp=（from:number，to:number）=>{
如果（从！==0）{
字段。移动（从、到）；
}
};
const moveExerciseDown=（from:number，to:number）=>{
如果（从！==fields.length-1）{
字段。移动（从、到）；
}
};
const onMovePosition=（from:number，pos:number）=>{
如果（位置>0和位置（&P）{
//如果其中一项的组号正确，
//指定要移动到该位置的位置
如果（field.group==位置和位置）{
字段。移动（从，idx）
breakup=true
}
if（idx+1groupIdx[idx+1].group）{
字段交换（idx，idx+1）
}
})
}
}
//这就是我的代码所在的地方！！！！！！！！！！！！！！！
const gotoButton=（）=>{
设y=document.getElementById（“exerciseScroll”）！.offsetTop；
让内容=document.querySelector（“离子内容”）；
内容？.scrollToPoint（0，y）；
};
返回(
{
fields.push（{group:fields.length+1}）
戈托布顿（）
}}
>
加练习
{fields.map（（练习，idx）=>{
返回(
运动组#
parseInt（值，10）}
正常化={
（值：任意，以前的值：任意，所有值：任意）=>{
if（值<0 | |值>fields.length | | isNaN（值））{
返回以前的值
}
如果（idx>0&&allValues.exercises[idx-1]。组-1
（更改组#以创建超集）
moveExerciseUp（idx，idx-1）}
>
moveExerciseDown（idx，idx+1）}
>
字段。删除（idx）}
color=“危险”
fill=“清除”
size=“小”
>
消除运动
);
})}
{submitFailed&&error&&(
{错误}
)}
);
};

这是您在onClick事件中调用gotoButton的方式。它在组件完成渲染之前评估gotoButton。请参见此答案，以了解以下示例：

---

为了避免这种情况，您可以在gotoButton函数中运行fields.push（{group:fields.length+1}），并像这样传递gotoButton'onClick={gotoButton}'。

Hello。可能还有一个额外的

在上面代码的这一行
document.getElementById（“exerciseScroll”）！。偏置就在
.offsetTop
之前。这是故意的吗？是的，这是typescript语法，让它知道它不是未定义的或空的，似乎无法修复它。我完全按照你说的做了修改，但似乎没有什么变化。这可能是css问题吗？