Поведение ScrollToOptions: «гладкое» не работает в Chrome и Edge v81+
После тестирования в BrowserStack я пришел к выводу, что использование scrollTo() с опционным параметром behavior: smooth не работает в Chrome и Edge, начиная с версии 81. Версия 80 Edge и Chrome работала должным образом. Согласно MDN, он должен работать без звездочки. (в отличие от сафари)
В популярных ответах, таких как этот, использование behavior: smooth является рекомендуемым способом включения плавной прокрутки в вашем веб-приложении.
Вот небольшая воспроизводимая:
<html>
<button onclick = "goToAnchor('b')">Scroll to B</button>
<div id = "a" style = "height: 1000px; background-color: blue;">Blue</div>
<div id = "b" style = "height: 1000px; background-color: red;">Red</div>
<div id = "c" style = "height: 1000px; background-color: green;">Green</div>
</html>
<script>
function goToAnchor(anchor) {
let rect = document.getElementById(anchor).getBoundingClientRect();
window.scrollTo({
left: rect.left + window.pageXOffset,
top: rect.top + window.pageYOffset,
behavior: 'smooth',
});
}
</script>Ожидаемое поведение будет заключаться в том, что окно браузера плавно интерполирует вид до красного div. Он делает это правильно во всех версиях Firefox, которые я тестировал. Во всех версиях Chrome, начиная с v81, и во всех версиях Edge, начиная с v81, похоже, используется поведение behavior: auto, то есть он переходит к div, а не плавно интерполирует представление.
В версии 80 Edge и Chrome он ведет себя точно так же, как Firefox, а это означает, что эта ошибка (?) должна была появиться в версии 81 — возможно, в общей кодовой базе Chromium?
Я считаю очень маловероятным, что я первый, кто обнаружил эту проблему, поскольку она не работала с апреля, и поэтому я должен сделать вывод, что я делаю что-то не так. Может ли кто-нибудь указать на ошибку в коде? Или API Chrome и Edge действительно не работают? Скрыто ли поведение за флагом функции, как в Safari?
На какой платформе? Я пробовал это через BrowserStack в Win10, Win7 и Mac, но не работал ни в одном из этих случаев.
Выиграй 10 для меня... Плавно
Интересный. Может ли это быть как-то связано с предпочтениями пользователя?
W10 x64, Chrome 87.0.4280.88, Edge 87.0.664.60 — оба переходят без анимации к красному div (FF83 работает)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я пытаюсь провести тест с MS Edge версии 87.0.664.60 и Google Chrome версии 87.0.4280.88.
С моей стороны код отлично работает в обоих браузерах.
Вот результат моего теста: (выше — MS Edge, а ниже — браузер Google Chrome)
Вы делаете этот тест, используя BrowserStack. Возможно, проблема связана с BrowserStack.
Я предлагаю вам попробовать сделать тест, используя настоящие браузеры. Это может помочь вам найти причину проблемы.
Да, я думаю, вы можете быть правы, по крайней мере частично. Я думаю, что это как-то связано с удаленными подключениями. Проблема была обнаружена во время проверки функций дизайнером моего текущего проекта. Затем он был протестирован несколькими разработчиками, которые сообщили об одной и той же проблеме, хотя следует отметить, что изначально у меня не было этой проблемы, когда я разрабатывал эту функцию некоторое время назад. Теперь я понимаю, что я был в офисе, когда разрабатывал его изначально, но теперь я подключен через RDP вместе со всеми другими разработчиками. Может ли это быть ошибкой, связанной с Covid-19? :П
Я считаю, что нашел виновника, и, что интересно, кажется, что это Firefox, который является лишним.
В этой ветке StackOverflow об обнаружении соединений RDP текущий топ-ответ гласит:
Вы можете использовать следующий медиа-запрос:
@media screen and (prefers-reduced-motion: reduce) { . . . }
Часть prefers-reduced-motion интересная. В моем тестировании кажется, что это также изменяет вызовы scrollTo() с scroll-behavior: 'smooth' для перехода, а не для интерполяции.
Я сделал дополнение к примеру кода вопроса, чтобы продемонстрировать эту функцию:
<html>
<button onclick = "goToAnchor('b')">Scroll to B</button>
<p class = "reduced-motion">Reduced motion is enabled.</p>
<div id = "a" style = "height: 1000px; background-color: blue;">Blue</div>
<div id = "b" style = "height: 1000px; background-color: red;">Red</div>
<div id = "c" style = "height: 1000px; background-color: green;">Green</div>
</html>
<style>
.reduced-motion {
display: none;
}
@media (prefers-reduced-motion) {
.reduced-motion {
display: inline;
}
}
</style>
<script>
function goToAnchor(anchor) {
let rect = document.getElementById(anchor).getBoundingClientRect();
window.scrollTo({
left: rect.left + window.pageXOffset,
top: rect.top + window.pageYOffset,
behavior: 'smooth',
});
}
</script>Теперь он скажет: «Уменьшение движения включено». рядом с кнопкой в зависимости от вашей ОС и конфигурации браузера. В этом случае вызов scrollTo будет просто переходить, а не интерполировать.
Короче говоря, проблема в том, что управление удаленным рабочим столом BrowserStack также включает этот флаг.
Включение «Простота доступа > Показать анимацию» в Windows устранило эту проблему.
Работает в моем Chrome 87.0.4280.66 и Edge 87.0.664.60