Чи працює 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 alternative та animate <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