How to not to share scroll state between slides?

How can we separate our scroll state between slides? This is real problem for me.

Setting up autoHeight, scroll-y="currentSlideIndex === 1" doesn’t fix but rather create another issue here. I can’t make a page-based form because I need to show the segment for each slide and this was the part of the design requirement. Any clue?

This is a gif… :point_down: but not moving for some reason until you click it :smile_cat:

Here is my script:

    [CInteractiveScrollview] is just a template for
    IonPage > IonHeader > IonContent > IonFooter.

    It does nothing but only to reduce the repetition when
    declaring header and footer it also has no logic other than
    checking the scroll direction to show/hide the footer.
    title="New Education"
    <template #header>
        :items="['Education Detail', 'Education Field', 'Additional Data']"

      <FormDetail class="noscroll" />
      <FormField />
      <FormField class="noscroll" />
      <FormField class="noscroll" />

<script lang="ts">
  // Just some import mess
  export default defineComponent({
    name: 'EducationCreatePage',
    components: {
      ... // another import mess
    setup() {
      ... // Unrelated stuffs
      const { currentSegment } = useSegmentComposition()

      const slidesOptions = {
        preventInteractionOnTransition: true,
        allowSlidePrev: false,
        allowSlideNext: false,
        autoHeight: true,

      const {
      } = useSlideComposition()

      watch(currentSlide, (newSlide) => (currentSegment.value = newSlide))

      const slideNextOrSubmit = () => {
          .then((lastSlide) => (lastSlide ? null : slideNext()))
          .catch((err: any) => logger.error(err))

      const slidePrevOrBack = () => {
          .then((firstSlide) => (firstSlide ? router.back() : slidePrev()))
          .catch((err: any) => logger.error(err))

      return {

<style scoped>
  ::v-deep(ion-grid) {
    max-width: 100% !important;
    text-align: left !important;

  .noscroll {
    max-height: 100vh !important;
    height: calc(100vh - 60px) !important;
    padding: 0 1rem !important;
    overflow: hidden !important;

I’ve been hesitant to comment on your threads because I know nothing about Vue, but I can’t shake the feeling that you’re asking slides to do something they really aren’t intended for, and maybe your life will get a lot easier if you find some other way to implement your UI.

1 Like

your forward/back events are not on the slides component, so your slideNext/back are operating on your CInteractiveScrollView component

I have a similar design, header, content and footer with next/prev…
I had to forward the event up to the slides component

Hi @rapropos! Thanks for answering… I’ll try to use different approach on this.

Hi @stedweil , the problem is not about the event, it works perfectly fine. The problem is I’m not be able to separate the scroll between slides.

I don’t see that problem in my app. but I send the event to the slides component

I have a separate ioncontent per slide

That “separate ioncontent” part confuse me a little bit… If you have ioncontent per slide, doesn’t it means you creating a nested ioncontent on a view?

The docs said…

There should only be one content in a single view.

Would you share your code please?

Anyways, here is how my CInteractiveScrollview looks like:

    <IonContent :fullscreen="fullscreen" :scroll-x="scrollX" :scroll-y="scrollY">
        <IonHeader translucent collapse="condense">
            <slot name="header" />

        <slot />

here are instructions for my repo

the Content component contains the IonContent element. and will scroll on a device small enough.

I am not near a system where I can add more data elements, but u could make the default structures bigger in the Slides component to do it

Thank you very much, I’ll check it soon after this.