Определение области щелчка для прокрутки, имитация щелчка
На веб-сайте Microsoft OneDrive есть много страниц, на которых полоса прокрутки не работает с клавишами вверх/вниз при загрузке страницы: вам нужно щелкнуть область страницы рядом с полосой прокрутки, после чего клавиши начнут работать. (Происходит с целевой страницей, страницей «В этот день» и т. д.)
Я хочу написать сценарий tampermonkey, который будет делать этот щелчок при загрузке страницы. Я довольно долго копался в DevTools, пытаясь выяснить, что происходит/меняется, когда я делаю этот щелчок, и я в растерянности.
Как мне наблюдать за этой работой в DevTools? Какая точка зрения раскрывает это? Должен ли я использовать другой инструмент? Есть ли команды js, которые я могу запустить с консоли, которые мне здесь помогут?
Я использую последнюю версию браузера Google Chrome.
MRE недоступен по очевидным причинам, но если у вас есть учетная запись, страницы будут находиться на сайте onedrive.live.com или под ним, например «В этот день».
Обновление: setInterval(() => { console.trace('Focus:', document.activeElement); }, 5000); Всегда показывает активный элемент, являющийся элементом body, когда перелистывание клавиатуры работает, а когда нет.
Я не могу воспроизвести эту проблему и не могу найти страницу «В этот день», возможно, она доступна только в платной/старой учетной записи? на главной странице (onedrive.live.com) я могу использовать клавиатуру для прокрутки сразу после загрузки страницы
Это платный аккаунт. Если я открою новую вкладку и перейду на onedrive.live.com, перелистывание с клавиатуры не будет работать. Если я щелкну область, которая начнет работать, а затем перезагрузлю страницу с помощью F5, перелистывание клавиатуры все равно будет работать после перезагрузки. Любопытная разница.
попробуйте сфокусировать эту область в коде, используя element.focus(); обычно это происходит, когда вы щелкаете по элементу. Вы также можете проверить значение document.activeElement, когда прокрутка работает, а когда нет.
Спасибо за предложение! Я обновил пост: activeElement всегда body -- когда он работает, а когда нет.
это, вероятно, <div>, попробуйте добавить div.tabIndex = -1, затем div.focus(); например: страница фотографий/альбома: $('div[aria-label = "Photos list"]').tabIndex=-1; $('div[aria-label = "Photos list"]').focus()
Это сделало это! добавив tabIndex, я думаю, и используя метку aria (я использовал xpath, но то же самое.) Сделайте ответ и получите признание @GTK.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Некоторые страницы OneDrive действуют как SPA, а другие вызывают полную загрузку, поэтому вам следует применить «исправление» как к load, так и к navigation.
в зависимости от желаемого поведения вы можете preventScroll на целевом div и отключить его outline.
примечание: элементы div не могут быть сфокусированы по умолчанию, но если задать значение tabIndex, они станут фокусируемыми.
// ==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
}
вы имеете в виду сайт Microsoft 365? (www.office.com), предоставьте дополнительную информацию.