scrollIntoViewおよびscrollIntoViewIfNeededAPIの概要
Introduction Scrollintoview
こんにちは〜視聴者の皆様、みなさん、みなさん！建国記念日中秋節の休日はもうすぐ終わります。勉強と仕事をするために（ti）愛（zhong）を片付ける時が来ました。今回は、2つの使いやすいAPIを紹介します。実際、これも怠惰なアーティファクトです。
による MDN 説明、Element.scrollIntoView()このメソッドは、現在の要素をブラウザウィンドウの表示領域にスクロールします。
およびElement.scrollIntoViewIfNeeded（）このメソッドは、ブラウザウィンドウの表示領域にない要素をブラウザウィンドウの表示領域にスクロールするためにも使用されます。ただし、要素がすでにブラウザウィンドウの表示領域にある場合、スクロールは発生しません。このメソッドは、標準のElement.scrollIntoView（）メソッドの独自のバリアントです。
したがって、一番上に戻って一番上の位置に移動する必要があり、キーボードがポップアップして入力ボックスをブロックすることは簡単に解決できます。
ただし、使いやすいAPIに直面して、フロントエンドの最初の反映は互換性を確認することです！
最初に見てくださいscrollIntoViewの：
黄色、黄色、緑、緑の部分を見ると、基本的に安心できます。サポートしていないのは、特定の属性の値だけです。
見た後scrollIntoViewIfNeeded：
IE with FireFox完全な赤、if PCそれを使用したい場合は、内部プロジェクトしか持てません。これは残念です。でもモバイル側はまだグリーンで、基本的にはOK、安心して使えます〜
この記事は〜の紹介なので、属性ごとに少しずつ書いています。demoクリックすると体験できます！
scrollIntoView
最初に導入されたscrollIntoView実際には非常に簡単に使用できます。要素を取得した後、直接呼び出されます。scrollIntoViewIfNeeded() OK、単純demo ちょうどこのような。 側面にある小さな緑色のブロックをクリックすると、ページが上にスクロールします。demoコードはおそらく次のようになります。
'chunk'> 'btn'>click const btn = document.querySelector('.btn') const test = document.querySelector('.chunk') btn.addEventListener('click', function() { test.scrollIntoView() }) Copy codeとても簡単ですか〜でもクラスメートからの質問があるかもしれません。これはアンカーの配置と同じではありませんか？意味がない！呼び出すときに心配しないでくださいscrollIntoView実際には、パラメータを渡すことができます。scrollIntoView 1つのパラメータのみを受け入れますが、それぞれ2種類のパラメータを受け入れますBooleanタイプパラメータおよびObjectタイプパラメータ。
まず、Booleanパラメータを入力します。名前が示すように、パラメータはtrue with falseを作成できます。 If true要素の上部は、要素が配置されているスクロール領域の表示領域の上部と整列します。 If false要素の下端は、要素が配置されているスクロール領域の表示領域の下端と整列します。簡単な例 ここをクリックできます 。主なコードは次のとおりです。
'chunk'> 'btn-top'>up 'btn-bottom'>down const up = document.querySelector('.btn-top') const down = document.querySelector('.btn-bottom') const test = document.querySelector('.chunk') up.addEventListener('click', function() { test.scrollIntoView(true) }) down.addEventListener('click', function() { test.scrollIntoView(false) }) Copy codeご覧のとおり、入力パラメータがそれぞれtrue対falseの場合、右側のボタンをクリックすると、赤divが表示可能領域の上部または下部に近くなります。 。
その後Objectタイプパラメータ、このオブジェクトには2つのオプションがあり、オブジェクト内にありますkey。block前のパラメータとBooleanタイプパラメータは同じですが、値はもはやtrue with falseよりセマンティックですstart with end。
別のオプションはbehaviorで、MDNはそれぞれ3つの望ましい値を提供しますauto、instant対smooth。このオプションは、ページのスクロール方法を決定し、測定auto対instant瞬時に対応する位置にジャンプし、チェックW3Cそのような文を発見した後： 'スクロール動作の瞬時値は自動に名前が変更されました。したがって、基本的には、2つのパフォーマンスは一貫していると判断できます。およびsmoothこれはアニメーションのプロセスですが、残念ながら、互換性について話すとき、黄色は属性をサポートしておらず、behavior値smoothをサポートしていないと言われています。さらに、IEおよびモバイルUCブラウザーを測定した後、彼らは単にObject Typeパラメーターをサポートしていないことを発見し、scrollIntoView({...})デフォルトの結果、つまりscrollIntoView(true)のみがある場合に呼び出します。簡単な例 ここを見て 体験したい場合smooth効果を体験するには、ChromeまたはFirefoxを使用する必要があります！主なコードは次のとおりです。
'chunk'> 'btn-top'>up 'btn-bottom'>down const up = document.querySelector('.btn-top') const down = document.querySelector('.btn-bottom') const test = document.querySelector('.chunk') up.addEventListener('click', function() { test.scrollIntoView({ block: 'start', behavior: 'smooth' }) }) down.addEventListener('click', function() { test.scrollIntoView({ block: 'end', behavior: 'smooth' }) }) Copy codescrollIntoViewIfNeeded
紹介後scrollIntoViewその変種を紹介する時が来ました。scrollIntoViewIfNeededそうです。 2つの間に2つの主な違いがあります。まず第一にscrollIntoViewIfNeededそれは怠惰です。要素が表示領域にある場合、呼び出されたときにページはスクロールしません。続いてscrollIntoViewIfNeeded only Booleanタイプパラメータ。つまり、すべてが瞬時にスクロールし、アニメーションはできません。
scrollIntoViewIfNeeded 1つを受け入れることができますBoolean Typeパラメーター、およびscrollIntoView different、trueデフォルトですが、上にスクロールする代わりに、要素は表示領域の中央に配置されますfalse要素は、要素がどちら側に近いかに応じて、上部または下部に配置される場合があります。簡単な例 ここをクリックできます 。おおよそのコードは次のとおりです。
'chunk'> 'scrollIntoView'>scrollIntoView top 'scrollIntoViewIfNeeded-top'>scrollIntoViewIfNeeded top 'scrollIntoViewIfNeeded-bottom'>scrollIntoViewIfNeeded botom const scrollIntoView = document.querySelector('.scrollIntoView') const scrollIntoViewIfNeededTop = document.querySelector('.scrollIntoViewIfNeeded-top') const scrollIntoViewIfNeededBottom = document.querySelector('.scrollIntoViewIfNeeded-bottom') const test = document.querySelector('.chunk') scrollIntoView.addEventListener('click', function() { test.scrollIntoView(true) }) scrollIntoViewIfNeededTop.addEventListener('click', function() { test.scrollIntoViewIfNeeded(true) }) scrollIntoViewIfNeededBottom.addEventListener('click', function() { test.scrollIntoViewIfNeeded(false) }) Copy codeドキュメントに記載されているように、赤が表示されている場合div表示領域の場合は完全に呼び出されますscrollIntoView()呼び出し中にスクロールしますscrollIntoViewIfNeeded()表示されません。そして、練習した後、ドキュメントに記載されていない詳細をいくつか見つけました。要素が表示領域にあるがすべてが表示されていない場合に呼び出されますscrollIntoViewIfNeeded()パラメータがtrueまだfalseの場合、スクロールが発生し、要素にスクロールして位置合わせする効果があります要素がどちらの端に近いかに応じて、表示可能領域の上部または下部。みんな注意が必要です〜
概要
実際、このAPIは必須ではなく、その効果を実現する方法は他にもたくさんあります。ただし、条件が許せば、それを使用すると多くのお金を節約できます。JSコードまたはアンカーの束はまだ非常にクールです。
オフィシャルをご覧いただきありがとうございます！この記事がお役に立てば幸いです。これら2つのAPIを使用することを忘れないでください。