javascripthtmlgoogle-chromedomtampermonkey

Determining a click region for scroll, simulating the click


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.


Solution

  • 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
    }