Работает ли scrollIntoView во всех браузерах?

Ответы:

82

Поддерживается да, но пользовательский опыт ... плохой.

Как отметил @ 9bits, это уже давно поддерживается всеми основными браузерами . Не беспокойтесь об этом. Основная проблема в том, как это работает. Он просто переходит к определенному элементу, который может находиться в конце страницы. Переходя к нему, пользователи понятия не имеют:

  • страница прокручена вверх
  • страница была прокручена вниз
  • они были перенаправлены в другое место

Первые два можно определить по положению прокрутки, но кто сказал, что пользователи отслеживали положение прокрутки до того, как был сделан переход? Так что это недетерминированное действие.

Последнее может быть правдой, особенно если страница имеет движущийся заголовок, который прокручивается вне поля зрения, а оставшийся дизайн страницы ничего не подразумевает нахождения на той же странице (если он также не имеет вертикального элемента общей высоты, такого как левое меню бар). Вы удивитесь, сколько страниц имеет эту проблему. просто проверьте их сами. Зайдите на какую-нибудь страницу, посмотрите на нее вверху, затем нажмитеEnd клавишу и посмотрите еще раз. Скорее всего, вы подумаете, что это другая страница.

scrollintoviewПлагин jQuery с анимацией спешит на помощь

Вот почему все еще существуют плагины, которые выполняют прокрутку в поле зрения вместо использования встроенной функции DOM. Обычно они оживляют прокрутку, что устраняет все 3 проблемы, описанные выше. Пользователи могут легко отслеживать движение.

Роберт Коритник
источник
1
Примечание. Плагин jQuery не работает (справа), если прокручиваемый элемент находится в iframe (по понятным причинам). element.scrollIntoView работает даже тогда.
panzi
7
новая спецификация ScrollIntoViewOptionsпозволяет указать behavior: 'smooth'. к сожалению, нет никакого способа легко определить, поддерживается ли эта опция в браузере…
летучая овца
6
Кажется, что Firefox поддерживает behavior: "smooth", но не Chrome или Safari.
Flimm 02
1
Это полезно для таких вещей, как создание настраиваемого раскрывающегося меню, в котором клавиши со стрелками управляют вверх / вниз и в зависимости от выбранного элемента меню прокручивается. В этом случае было бы плохо, если бы он не переключался между элементами мгновенно.
user2867288
1
@Flimm ни в IE / Edge. См. Ссылку , только FF36 + имеет эту функцию. Таким образом, это, к сожалению, бесполезно.
Алекс Жуковский
3

Я использую iScroll -4 Маттео Спиннелли, и он также работает в iOS-сафари. Он имеет три метода scrollTo, scrollToElement и scrollToPage. Допустим, у вас есть неупорядоченный список элементов, заключенных в div. Как писал Роберт Коритник выше, вам нужна небольшая анимация, чтобы показать, что вы прокручиваете. Приведенный ниже метод достигает этого эффекта.

scrollToElement(element, time);
тхандасору
источник
2
ваша ссылка на iScroll-4 мертва
Ромен Винсент
2

Вы можете использовать JQuery альтернативу и одушевленные <html>и <body>элементы:

$('html, body').animate({
  scrollTop: $("#myElem").offset().top
}, 1000);
S1awek
источник
1

Не пробовал, но похоже, что совмещение встроенной функции scrollIntoView сэкономит много кода. Вот что я бы сделал, если бы вам хотелось анимированного действия:

  1. Кэшировать текущую позицию прокрутки контейнера как НАЧАЛЬНУЮ ПОЗИЦИЮ
  2. запустить встроенный scrollIntoView
  3. Снова кэшируйте позицию прокрутки как КОНЕЧНУЮ ПОЗИЦИЮ
  4. Верните контейнер обратно в НАЧАЛЬНОЕ ПОЛОЖЕНИЕ
  5. Анимировать прокрутку до КОНЕЧНОГО ПОЛОЖЕНИЯ
Лекс
источник
1

прочтите пожалуйста о scrollIntoViewIfNeeded 

if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}
zloctb
источник