Ion-content scroll to element or scroll percentage

@lhk wrote:

My app consists of a page with a very long ion-content that users are supposed to read.
There are some other pages (config etc) that users might occasionally interact with.

After each page-switch, the ion-content would be reset to it’s starting position.
So I stored the current scroll position in a variable and added a useEffect (it’s a react app) that scrolls to this position.

So far this worked nicely, but now I added the config option of changing fontsize. Which will change the size of all elements in that ion-content and invalidate the scroll position.
As a workaround I tried scrolling to a percentage:

useEffect(() => {
    const elem: any = document.getElementById("reader-content");
    if (!elem)  return;

    elem.scrollToPoint(0, scrollPercentage * elem.offsetHeight);
});

//...


onIonScroll={(ev) => {
    const elem = document.getElementById("reader-content");
    if (!elem) return;

    scrollPercentage = ev.detail.currentY / elem.offsetHeight;
}}

But this will not return to the same position. Apparently offsetHeight includes borders and other padding around the element. So I tried clientHeight, but that also doesn’t work.

Can you help me with what’s going wrong here?

Eventually, I would like to keep track of items that have been read. Maybe this is the right time to add that functionality. Is it possible to use scrollTo(element) with ionContent? Can I specify an HTML element to scroll to, instead of a coordinate?

Posts: 1

Participants: 1

Read full topic