83

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

4

6 に答える 6

82

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

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

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

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

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

アニメーション化scrollintoviewされたjQueryプラグインが救いの手を差し伸べます

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

于 2012-02-25T16:55:16.963 に答える
13

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

于 2012-02-25T16:40:27.530 に答える
3

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

scrollToElement(element, time);
于 2012-11-18T09:13:23.697 に答える
3

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

if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}
于 2017-02-02T08:12:30.857 に答える
2

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

$('html, body').animate({
  scrollTop: $("#myElem").offset().top
}, 1000);
于 2018-06-20T13:07:19.257 に答える
1

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

  1. コンテナの現在のスクロール位置をSTARTPOSITIONとしてキャッシュします
  2. 組み込みのscrollIntoViewを実行する
  3. スクロール位置をENDPOSITIONとして再度キャッシュします
  4. コンテナをSTARTPOSITIONに戻します
  5. ENDPOSITIONまでスクロールをアニメーション化する
于 2014-11-25T05:09:31.543 に答える