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

Question 1

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

Question 2

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

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

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

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

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

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

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

Question 3

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

Question 4

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

scrollToElement(element, time);

Question 5

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

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

Question 6

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

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

Question 7

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

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

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

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

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

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