IonContent scrollToPoint

Ionic Framework Ionic Vue
1

Hello everyone. May I ask how to use scrollToPoint API from ‘ion-content’ docs?

when I use it for our company project and get these errors every time.
hope someone help.

image
image1073×180 10.6 KB

my code:
`
import { IonContent as content } from ‘@ionic/vue’

const scrollToID = (event) => {
const fetchData = event.$el.nextSibling.nextElementSibling.id;
const ele = document.querySelector(’#{fetchData}’);
content.$el.scrollToPoint(0, ele.offsetTop, 1000);
}

`

2

The problem is close, I am already figured out how to scroll to an element.

after I consult the way how to scroll in another reference page description, Finally I found the way.

The problem is not about calling IonContent from @ionic/vue
the problem is from which content I calling for using, and inside that content does has that id able to found then scroll to that.

so the best way I can:

<ion-content class="bindingScroll" scroll-events="true">
    <button @click="scrollThat('idName')">click</button>
    <p id="idName">hello world</p>
</ion-content>

js

const scrollThat = ( event ) => {
    const scrollTo = document.querySelector("ion-content.bindingScroll");

   // scrollToPoint(x, y, duration)
    scrollTo.scrollToPoint(0, scrollTo.offsetTop, 1000);
}
3

You should be grabbing a ref to the IonContent, then calling scrollToPoint on that reference:

<ion-content ref="myContent">...</ion-content>

const scrollThat = () => {
  myContent.value.$el.scrollToPoint(0, 100, 1000);
}
2 Likes
4

Hello @ldebeasi, thank you for an answer my question.
I have a question about if my id and my @click are inside the slots?
Because I made $emit inside the slots, so I don’t know how to reference my function and make a click inside.

That why I choose DOM to solved my question. Do you have a better idea for this?
I knew you are very busy. I’d like to thank you so much for taking a busy time to give us advice and help us solved the problem.
Ciao.

5

If you are using the Composition API, you can do something like this:

Component.vue

<template>
  <ion-page>
    <ion-content>
      ...
      <ion-button @click="scrollToBottom()">Scroll to Bottom</ion-button>
    </ion-content>
  </ion-page>
</template>

<script>
  import { IonContent, IonButton, IonPage } from '@ionic/vue';
  import { defineComponent, ref } from 'vue';
  
  export default defineComponent({
    components: { IonContent, IonButton, IonPage },
    setup() {
      const myContent = ref();
      const scrollToBottom = () => {
        myContent.value.$el.scrollToBottom(0, 100, 1000);
      }
      return { myContent, scrollToBottom }
    }
  });
</script>

Using this approach you can reference the function and have it active when the button is clicked without having to use IDs on the content.

6

Hello @ldebeasi, I apologize for your cause not make a clear question.
I mean if I have use something like slots inside project like:

Main layout:

<ion-page>
  <ion-header>
     ...
  </ion-header>

  <ion-content :scroll-events="true" :full-screen="true">
     <slot />
  </ion-content>
</ion-page>

Above I call it base-layout from main.js

view pages:

<base-layout>
   <template />
</base-layout>

inside template:

<div>
   <button @click="fnc(idName)">move to id element</button>
   <p id="idName">animation move from button</p>
</div>

From the above presentation, my question is how to pass each other the ref when they have separate in different patterns.

I have an idea to using pass-by props. But not make sure that will be good or bad and does it will work or not.

7

I would try passing a prop down first. That seems to be in line with what Vue recommends for passing data down.

1 Like
8

@ldebeasi I think finally I understand the answer what I must suppose to do now.

thank you so much. I know how to do now.

1 Like
9

works fine for me. Is that somewhere in the Ionic docs ? was looking for ages for a solution :frowning:

10

Calling methods on components is referenced in the Ionic Vue Quickstart Guide and on the Ionic Vue Troubleshooting Guide.