I am trying to write an extension in chrome from scrolling content with the keyboard. This is easy with most sites, but ones with built with ionic do not scroll the same. The first problem is that the user has to click within the ion-content element before they can scroll. I’ve tried triggering a click and focus on this element but this does nothing. The next thing I was going to try was to just capture a key press and scroll manually. I am able to use the ionScroll event, but detail always returns 0. Is there a part of the event I need to sent to get it to scroll? Am I on the right path?
Here is the html for ion-content I am trying to scroll:
<ion-content class="md hydrated" style="--offset-top:0px; --offset-bottom:0px;">
Here is the javascript I am using to try to scroll:
var content = document.querySelector('ion-content');
content.scrollEvents = true;
content.addEventListener('ionScrollStart', () => console.log('scroll start'));
content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
console.log("About to scroll");
var ionScrollEvent = document.createEvent('MouseEvents');
ionScrollEvent.initEvent('ionScroll', true, true);
ionScrollEvent.detail = 500;
content.dispatchEvent(ionScrollEvent);
this.console.log("Finished scrolling");
This code returns in the console:
About to scroll
scroll 0
Finished scrolling
Also, scrolling manually with the mouse triggers scroll start and scroll end but never the scroll event
The main site I am looking for is JustWatch
https://www.justwatch.com/
Thanks!
-Joel