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

тут scrollIntoView() работать во всех браузерах? Если нет, есть jQuery альтернатива?

80
javascript jquery js-scrollintoview

6 ответов

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

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

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

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

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

анимация scrollintoview jQuery плагин для спасения

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

77
13

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

scrollToElement(element, time);
1

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

  1. кэш текущей позиции прокрутки контейнера в качестве начальной позиции
  2. запустить встроенный scrollIntoView
  3. кэшировать позицию прокрутки снова в качестве конечной позиции
  4. вернуть контейнер в исходное положение
  5. анимация прокрутки до конечной позиции
1

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

if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}
1

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

$('html, body').animate({
  scrollTop: $("#myElem").offset().top
}, 1000);
0