KaiOS infinite scrolling

Question

I have a little issue with scrolling in KaiOS. I would like to have the first element selected when the user goes down on the last element. So, I used document.getElementById(element).scrollIntoView(); to get the first element into the view. Works fine in the WebIDE, but not on the real phone.

I also tried scrollElement.scrollBy({ top: -(document.documentElement.scrollHeight), left: 0, behavior: "smooth" });. When I try it in the console it works fine, but when executes in the app, it doesn't. Maybe it has something to do with the .focus on the element, I have no idea. Is there a good example for this kind of scrolling? What am I doing wrong?

Answer 1

Try passing false as a parameter to the scrollIntoView() API:

document.getElementById(element).scrollIntoView(false)

Alternatively

There might be an issue with the calculated screen height on the phone. This can possibly lead to this anomaly. Keep a check on the screen height on the phone and the overflow behaviour of the parent.

Answer 2

You could make the first element focusable(tabindex) and then .focus() the element, the .focus() function scrolls the element into view.