web-dev-qa-db-ja.com

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

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

javascriptjqueryjs-scrollintoview
82
9-bits

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

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

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

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

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

救助のためのアニメーションscrollintoview jQueryプラグイン

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

80
Robert Koritnik

http://www.quirksmode.org/dom/w3c_cssom.html

13
9-bits

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

scrollToElement(element, time);
3
thandasoru

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

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

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

  1. コンテナの現在のスクロール位置をSTART POSITIONとしてキャッシュします
  2. scrollIntoViewに組み込まれた実行
  3. スクロール位置を終了位置として再度キャッシュします
  4. コンテナーをSTART POSITIONに戻す
  5. スクロールをアニメーション化してエンドポジションを終了
1
Lex

JQueryの代替を使用して、<html>および<body>要素：

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