Работает ли scrollIntoView во всех браузерах? - PullRequest
Новая
       13

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

82 голосов
/ 25 февраля 2012

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

Ответы [ 6 ]

80 голосов
/ 25 февраля 2012

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

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

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

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

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

Анимированный плагин scrollintoview jQuery для спасения

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

13 голосов
/ 25 февраля 2012
3 голосов
/ 18 ноября 2012

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

scrollToElement(element, time);
1 голос
/ 02 февраля 2017

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

if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}
1 голос
/ 25 ноября 2014

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

  1. Кэширует текущую позицию прокрутки контейнера как START POSITION
  2. запустить встроенный scrollIntoView
  3. Кэшируйте позицию прокрутки снова как КОНЕЦ ПОЗИЦИИ
  4. Вернуть контейнер обратно в исходное положение
  5. Анимированная прокрутка до КОНЕЧНОГО ПОЗИЦИИ
0 голосов
/ 20 июня 2018

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

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