scrollIntoViewはすべてのブラウザで機能しますか？

Question 1

DOESのscrollIntoView()すべてのブラウザで動作しますか？そうでない場合、jQuery代替手段はありますか？

Question 2

はいサポートされていますが、ユーザーエクスペリエンスは...悪いです。

@ 9bitsが指摘しているように、これはすべての主要なブラウザで長い間サポートされてきました。それについて心配する必要はありません。主な問題はそれが機能する方法です。ページの最後にある可能性のある特定の要素にジャンプするだけです。そこにジャンプすることで、ユーザーは次のことを理解できません。

ページが上にスクロールされました
ページが下にスクロールされました
それらは他の場所にリダイレクトされました

最初の2つはスクロール位置によって決定できますが、ジャンプが行われる前にユーザーがスクロール位置を追跡したと誰が言いますか？したがって、これは非決定論的なアクションです。

最後の1つは、特にページにスクロールして表示されない移動ヘッダーがあり、残りのページデザインが同じページにあることを意味しない場合に当てはまります（左側のメニューのように全高の垂直要素もない場合）バー）。この問題が発生しているページの数に驚かれることでしょう。自分でチェックしてください。あるページに移動し、上部を見てから、Endキーを押してもう一度見てください。別のページだと思われるかもしれません。

アニメーション化された`scrollintoview`jQueryプラグインが救助に

そのため、ネイティブDOM関数を使用する代わりにスクロールインビューを実行するプラグインがまだあります。これらは通常、スクロールをアニメーション化して、上記の3つの問題をすべて排除します。ユーザーは簡単に動きを追跡できます。

Question 3

そのように見えます：http：//www.quirksmode.org/dom/w3c_cssom.html

Question 4

Matteo SpinnelliのiScroll-4を使用していますが、iOSサファリでも動作します。これには、scrollTo、scrollToElement、scrollToPageの3つのメソッドがあります。div内にラップされた要素の順序付けられていないリストがあるとしましょう。Robert Koritnikが上で書いたように、スクロールしたことを示すには、そのわずかなアニメーションが必要です。以下の方法でその効果が得られます。

scrollToElement(element, time);

Question 5

これは試していませんが、組み込みのscrollIntoView関数に便乗すると多くのコードを節約できるようです。アニメーションアクションが必要な場合は、次のようにします。

コンテナの現在のスクロール位置をSTARTPOSITIONとしてキャッシュします
組み込みのscrollIntoViewを実行する
スクロール位置をENDPOSITIONとして再度キャッシュします
コンテナを開始位置に戻します
ENDPOSITIONまでスクロールをアニメーション化する

Question 6

scrollIntoViewIfNeededについてお読みください

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

Question 7

jQueryの代替およびアニメーション<html>と<body>要素を使用できます。

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

scrollIntoViewはすべてのブラウザで機能しますか？

はいサポートされていますが、ユーザーエクスペリエンスは...悪いです。

アニメーション化されたscrollintoviewjQueryプラグインが救助に

アニメーション化された`scrollintoview`jQueryプラグインが救助に