使用 Ionic React 添加滚动按钮

Question

我正在尝试使用 Ionic React 添加一个滚动到页面顶部的按钮。到目前为止，这是我的代码的一部分 -

...
function scrollToTop() {
    return document.getElementById("page")!.scrollTop;
}

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
            <IonButtons slot="start">
                <IonMenuButton />
            </IonButtons>
            <IonTitle slot="end">Ionic Template - JB</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent id={"page"}>
        <IonCard  className="welcomeImage">
            <img src="/assets/welcomeBacking.jpg" alt=""/>
            <IonCardHeader>
                <IonCardTitle>Welcome!</IonCardTitle>
                <IonCardSubtitle>To this Ionic Template</IonCardSubtitle>
            </IonCardHeader>
            <IonCardContent>
                Lorem ipsum........
            </IonCardContent>
        </IonCard>
        {/*Checklist*/}
        <IonList>
            {form.map(({val, isChecked, isDisabled}) => (
                <IonItem key={val}>
                    <IonLabel>{val}</IonLabel>
                    <IonCheckbox slot={"start"} value={val} checked={isChecked} disabled={isDisabled} />
                </IonItem>
                ))}
        </IonList>
          <IonButton onClick={scrollToTop}>Scroll to top</IonButton>
      </IonContent>
    </IonPage>
  );
};

scrollToTop 函数应该滚动到 ID 为 'page' 的元素的顶部，但事实并非如此。单击按钮时我没有收到任何错误，而是什么也没有发生。

我知道在 Angular 中实现这是一件微不足道的事情，但我在使用 React 时遇到了问题。任何帮助都会非常感谢。

Answer 1

您可以使用 IonContent 的 scrollToTop 方法来完成此操作，但您必须先启用 scrollEvents。在离子反应中，可以使用 refs 访问这些方法。看起来反应不大，但至少现在可以用。

........    
import React, {useRef} from 'react';

const Home: React.FC = (props) => {
    const contentRef = useRef<HTMLIonContentElement | null>(null);
    const scrollToTop= () => {
        contentRef.current && contentRef.current.scrollToTop();
    };
    return (
        .....
        <IonContent ref={contentRef} scrollEvents={true}>
            ................
            <IonButton onClick={()=>scrollToTop()}>Scroll to top</IonButton>
        </IonContent>
        .....
    );
};

Answer 2


export const waitForElement = <K extends keyof HTMLElementTagNameMap>(
  sel: K,
  cb: (el: HTMLElementTagNameMap[K]) => void
) => {
  const el = document.querySelector(sel)

  if (!el || !el.offsetHeight) {
    requestAnimationFrame(() => waitForElement(sel, cb))
  } else {
    cb(el)
  }
}
//Use this function to scroll top.
export function scrollTop() {

  waitForElement("ion-content", (contentEl) => {
    if (contentEl) {
      contentEl.scrollToTop()
    }
  })
}

使用 Ionic React 添加滚动按钮

Adding in a scroll button with Ionic React

javascript

scroll

reactjs

ionic-framework

ionic4