On clicking the <IonBackButton />, The scroll-bar goes to the bottom of <IonList />

Ionic Framework Ionic React
#1

Hello everyone,

I am using the <IonBackButton /> on a page, and when I click on it to return the main page who is an <IonList />, the ScrollBar goes automatically to the bottom of the <IonList />.
And I want it, to stands as it was at the last time, before opening the page who contains the <IonBackButton />.

Thanks for your helps.

#2

You could try using the IonViewDidEnter hook.

I also did something similar with the “Next” and “Prev” buttons in my app:

  <IonButton
    onClick={() => {
      scrollToPageTop();
      setIsLoading(true);
      setCurrentJsonUrl(url);
    }}
  >
    {text}
  </IonButton>

const scrollToPageTop = (): void => {
  const body = document.querySelector('ion-content');
  if (body) {
    body.scrollIntoView({
      block: 'start',
      behavior: getScrollBehavior(),
    });
  }
}

const getScrollBehavior = (): ScrollBehavior => {
  const prefersReducedMotion = getPrefersReducedMotion();
  if (prefersReducedMotion) {
    return 'auto';
  }
  return 'smooth';
};

// https://www.joshwcomeau.com/react/prefers-reduced-motion/
const getPrefersReducedMotion = (): boolean => {
  const mediaQuery = '(prefers-reduced-motion: no-preference)';
  const mediaQueryList = window.matchMedia(mediaQuery);
  const prefersReducedMotion = !mediaQueryList.matches;
  return prefersReducedMotion;
};

There are a couple extra functions I use to make sure that users who have the “reduced motion” accessibility setting enabled on their devices do not get smooth scrolling.

#3

Hello @ptmkenny,

Thank you very much for your response and your help.
Does this code will solve the problem on my example ? I think this code is on another situation isn’t ?

#4

Can you provide a more complete example, this shouldn’t be happening. I have a sample project that does not have this issue

#5

This is my code snippet, and thank you for your code example, its seems like mine. Hope you can help me.

/** Home.tsx **/
{data.length > 0 ? (
    <>
        <IonList style={{ marginTop: '100px' }}>
            {data.map((obj: any) =>
                <IonItem
                    key={obj.id} 
                    detail={true}
                    onClick={() => setShowToast({ isShown: true, objSelected: obj.name })}
                    routerLink={/films/${obj.id}}
                >
                    <IonThumbnail slot='start'>
                        <IonImg src={obj.image} />                    
                    </IonThumbnail>
                    <IonLabel>
                        <IonNote>{obj.type}</IonNote>
                        <h2 style={{ fontSize: '14px' }}>
                            <strong>{obj.name}</strong>
                        </h2>
                    </IonLabel>              
                    <IonNote slot='end'>
                        {obj.date}
                    </IonNote>             
                </IonItem>
            )}
        </IonList>

        <IonInfiniteScroll
            onIonInfinite={(ev: CustomEvent<void>) => searchNext(ev)}
            threshold='50px' //'100px'
            disabled={disableInfiniteScroll}       
        >
            <IonInfiniteScrollContent
                loadingSpinner='dots'                  
                loadingText='Loading more data...'                 
            >
            </IonInfiniteScrollContent>
        </IonInfiniteScroll>
    </>
) : (      
    <h4 style={{ marginTop: '125px', color: 'red' }}>
      <b>No data found to show.</b>
    </h4>
)}

/** RouteParams Interface **/
export interface RouteParams {
    filmID: string;
}

/** filmDetails **/
const filmDetails: React.FC = () => {
  const history = useHistory();
  const { filmID } = useParams<RouteParams>();

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot='start'>
            <IonBackButton />
          </IonButtons>  
          <IonTitle>{filmID}</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonCard>
          <IonCardHeader>
            <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
            <IonCardTitle>Card Title</IonCardTitle>
          </IonCardHeader>

          <IonCardContent>
            bla bla bla.
          </IonCardContent>
        </IonCard>
      </IonContent>
    </IonPage>
  );
};

export default filmDetails;
#6

Can you put that into a demo app and push it to github?

#7

Hello @mhartington,

I will put a video record :record_button: of the problem.

#8

Hello @mhartington,

I have sent you a private message, with a Google Drive link to the video record :record_button: showing the issue.

Thanks in advance.

#9

Just post the video here. I don’t review my private messages.

#10

Hello @mhartington ,

This is the link: video-record-issue-backbtn-auto-scroll-ionlist

Thanks in advance.