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

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

Источник

7 ответов

Решение

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

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

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

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

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

мультипликационный scrollintoview JQuery плагин на помощь

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

Источник

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

Источник

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

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

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

scrollToElement(element, time);
Источник

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

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

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

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

Css решил это, ребята! Я выбрал целевой идентификатор с помощью #idSelected и стилизовал его с помощью css «scroll-margin-top» и определил верхнюю границу поля в бэрах (используйте любое измерение, которое вам подходит).

      #idSelected {
   scroll-margin-top: 10rem;
}
Источник
Другие вопросы по тегам