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

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

6 80
javascript jquery js-scrollintoview

6 ответов:

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

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

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

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

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

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

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

77

похоже, что это так:http://www.quirksmode.org/dom/w3c_cssom.html

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