CODEWITHSUNDEEP
javascriptreactjstypescriptionic-framework
lhk
lhk

Reputation: 30066

ionic react, scroll to specific list item

Ionic Scroll To Specific List Item is about Ionic + Angular. The answer is specific to AngularJS.

I would like to ask the same question, but specific to Ionic + React:

With layout like this:

<IonContent>
  <IonList>
    <IonItem key={1}>1</IonItem>
    <IonItem key={2}>2</IonItem>
    <IonItem key={3}>3</IonItem>
    <IonItem key={4}>4</IonItem>
    <IonItem key={5}>5</IonItem>
  </IonList>
</IonContent>

How can I scroll to a specific list item?

Upvotes: 0

Views: 1661

Answers (1)

Aaron Saunders
Aaron Saunders

Reputation: 33345

const App = () => {
  const [text, setText] = useState("");

  const gotoButton = () => {
    let y = document.getElementById("row-" + text).offsetTop;
    console.log(y);
    let content = document.querySelector("ion-content");
    content.scrollToPoint(0, y);
  };

  return (
    <IonApp>
      <IonHeader>
        <IonToolbar>
          <IonButton onClick={() => gotoButton()}>GOTO ROW</IonButton>
          <IonInput
            value={text}
            placeholder="Enter Row Number"
            onIonChange={e => setText(e.detail.value)}
          />
        </IonToolbar>
      </IonHeader>
      <IonContent
        className="ion-padding"
        scrollEvents={true}
        onIonScrollStart={_e => {
          console.log(_e);
        }}
        onIonScroll={() => {}}
        onIonScrollEnd={() => {}}
      >
        {/* <!-- LIST --> */}
        <IonList>
          {Array(200)
            .fill()
            .map((v, index) => {
              return (
                <IonItem id={"row-" + index} key={index}>
                  {index + ""}
                </IonItem>
              );
            })}
        </IonList>
        <button id="btn" />
      </IonContent>
    </IonApp>
  );
};

export default App;

Upvotes: 2

Related Questions