Microsoft's OneDrive website has many pages where the scroll bar doesn't work with page up/down keys when the page loads: you have to click a region of the page near the scroll bar, then keys start working. (Happens with the landing page, the "On This Day" page, etc.)
I want to write a tampermonkey script that does this click when the page loads. I've poked around in DevTools for quite some time trying to figure out what happens/changes when I make this click, and I'm at a loss.
How do I go about watching this work in DevTools? Which view reveals it? Should I be using a different tool? Are there js commands I can run from the console that help me out here?
I'm using the latest Google Chrome browser.
MRE unavailable for obvious reasons, but if you have an account, pages would be at onedrive.live.com or pages under it like "On This Day".
Update: setInterval(() => { console.trace('Focus:', document.activeElement); }, 5000);
Always shows the active element being the body
element, when keyboard paging is working and when it isn't.
Some OneDrive pages act as SPAs and others cause a full-load, so you should apply the "fix" on both load
and navigation
.
depending on the behavior that you want, you could preventScroll
on the target div, and disable it's outline
.
note: divs cannot be focused by default, but if given a tabIndex
value they become focusable.
// ==UserScript==
// @name OneDrive keyboard scroll
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Auto-enable keyboard scrolling on OneDrive
// @author You
// @match https://photos.onedrive.com/*
// @match https://onedrive.live.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=onedrive.com
// @grant none
// ==/UserScript==
// delays are to make sure target element has loaded
window.addEventListener('load', () => setTimeout(focusDiv, 500));
window.navigation.addEventListener('navigatesuccess', () => setTimeout(focusDiv, 800) );
function focusDiv(){
const target = document.querySelector('div[aria-label="Photos list"]'); // add more selectors if needed
if (!target) return;
target.tabIndex = -1; // to make div focusable
target.style.outline = 'none'; // to remove black outline from div when focused
target.focus({preventScroll: true}); // if we don't want to scroll to the div when focusing it
}