Запретить автоматическую прокрутку Safari до целевого элемента (техника прокрутки перестала работать в Safari 12)

Question

Safari для рабочего стола автоматически прокручивает страницу до любого элемента ввода, на котором я фокусируюсь из javascript.Это поведение можно увидеть прямо здесь:

https://codepen.io/anon/pen/JmKPwZ

Я не нашел способа предотвратить эту автоматическую прокрутку.Однако существует известный обходной путь - сначала сохраните положение экрана и прокрутите назад до этой позиции после фокусировки:

var el = document.getElementById("editable");
var x = window.scrollX, y = window.scrollY; // save position
el.focus();
// manipulate selection inside the focused element with `document.createRange()`
// and do other stuff
window.scrollTo(x, y); // restore position

Этот обходной путь работал нормально в Safari 10 и перестал работать в Safari 12. Вызов scrollTo после фокусировки больше ничего не делает.Однако, если scrollTo выполняется с задержкой (даже очень короткой), все работает:

var el = document.getElementById("editable");
var x = window.scrollX, y = window.scrollY; // save position
el.focus();
// manipulate selection inside the focused element with `document.createRange()`
// and do other stuff
setTimeout(function() {
    window.scrollTo(x, y); // restore position
}, 1);

Но с этой задержкой в ​​1 миллисекунду можно увидеть, как страница сначала прокручивается в поле ввода изатем очень быстро вернуться к исходному положению, поэтому новый обходной путь далек от совершенства.

Есть ли способ изящно запретить настольному Safari автоматически прокручивать страницу до целевого элемента или, по крайней мере, хороший обходной путь для смягчения этогоповедение?

Answer 1

У меня только что была та же ошибка, и я смог заставить мою версию работать с:

setTimeout(function() {
    window.scrollTo(x, y);
}, 0);

Я думаю возможно, что в Safari 12 (по какой-то причине) метод фокусировки ввеб-API HTMLElement выполняется дольше, чем метод scrollTo в Windows Web API.Если это так, то в конечном итоге возникает условие гонки между завершением метода фокусировки и метода scrollTo, в результате чего позиция прокрутки остается в фокусированном элементе.

Использование setTimeout с задержкой 0 мспо сути, просто говорит: «Запустите это, как только все в стеке вызовов будет выполнено», что, кажется, решает проблему для меня.

Вот видео, которое я использовал в качестве ресурса при отладке: https://www.youtube.com/watch?v=8aGhZQkoFbQ

Надеюсь, это поможет!

Answer 2

После долгих раздумий я наткнулся на решение, которое работает:

var el = document.getElementById("editable");
var scrollTop = document.body.scrollTop; // save position
el.focus();
// manipulate selection inside the focused element with `document.createRange()`
// and do other stuff
document.body.scrollTop = scrollTop;

По какой-то причине сохранение document.body.scrollTop работает, а сохранение window.scrollX и window.scrollY - нет.