Ion-content scroll to element or scroll percentage

Ionic Framework
1

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?

2

Oh, maybe I should specify what I’ve tried so far, in order to scroll to a specific element.

I can get the element by it’s ID. Then I tried getting it’s offsetTop and to scroll to that position with the ion-content. But the offsetTop is always 0, independent of the element that I pick.
The problem here is that the offsetTop is always 0. Scrolling to a non-zero coordinate works.
That’s how I implemented it so far, to return to the same position (breaks because font resize).

I tried elem.scrollIntoView, but that doesn’t do anything. I tried it with multiple elements, some of them were definitely not on screen, and made sure that getElementById doesn’t return null.

window.scrollTo and window.scrollBy seem not to work with ion-content.

3

I think you may try to detect scroll does it work with “$element.detail.deltaY”, if it works, then u r able to try some case of logic javascript.