CODEWITHSUNDEEP
ionic-frameworkvuejs3js-scrollintoviewionic6
Max
Max

Reputation: 1

Ionic 6 & Vue 3 | Ion-Modal scrollIntoView() Hides Fixed Header Issue

I created scrollTo functionality by clicking on an icon in a sidebar. The scrolling works but the ion-header is moved out of view when scrolling to the desired location.

Here is a video of the behavior I am describing: https://drive.google.com/file/d/1XeCr0RKOlas_9PpZZTUx5pEteA8Np42-/view?usp=sharing

Almost identical template works with Ionic 4 & Angular

Any ideas on what is wrong here?

Template

<template>
  <ion-modal>
    <ion-header>
      <ion-toolbar>
        // Close modal button
      </ion-toolbar>
      <ion-searchbar />
      <div>
        // Vertical column of scroll to anchor tags
        <a @click="scrollTo('Math')">
          <ion-icon :icon="calculator"/>
        </a>
      </div>
    </ion-header>
    
    <ion-content>
      <ion-list>
        <ion-list-header id="Math">
          <ion-label>
            Math
          </ion-label>
        </ion-list-header>
      </ion-list>
    </ion-content>
  </ion-modal>
</template>

scrollTo Function

function scrollTo (category: string) {
  let elementId = category.replace(' ', '')
  let subject = document.getElementById(elementId)
  if (subject) {
    subject.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}

Upvotes: 0

Views: 612

Answers (1)

LarryCover
LarryCover

Reputation: 11

I had the same issue with Ionic 6 and & React.

In my case when removing the propery 'fullscreen' on the IonContent tag the issue disappeared.

Upvotes: 1

Related Questions