小さなヒント：スクロールや配置ではない要素フォーカスページのJS処理

1.問題の原因

要素にフォーカスがあるときにページがスクロールしないことを望む場合があります。たとえば、ボタンをクリックしてポップアップボックスを開きます。このとき、ポップアップボックスの閉じるボタンをクリックしてポップアップを非表示にします。ボックス。キーボードフォーカスが前のボタンに戻ることを願っています。次のJavaScriptコードが実行されます。

button.focus（）;

ただし、ポップアップが表示された後にページがスクロールすると、最初にクリックしたボタンが画面表示領域を使い果たしてしまうなど、さらに深刻なエクスペリエンスの問題が発生する場合があります。このとき、ボタンはボタンがトリガーされたときにトリガーされます。ボタン要素scrollIntoViewの位置が変更され、ブラウザがスクロールして突然ジャンプし、エクスペリエンスが非常に悪くなります。

私たちの期待される目標は、ボタンのフォーカスです。ボタンが画面表示領域にあるかどうかに関係なく、ブラウザーのスクロールの再配置は見つかりません。

それを達成する方法は？

2.新しいAPIパラメーターpreventScroll

スクロールせずにフォーカスしたい場合は、実際には非常に簡単です。たとえば、新しいAPIパラメーターpreventScrollを使用するだけです。

button.focus（{ 
    preventScroll：true 
}）;

preventScrollオプションのパラメータです。デフォルト値はですfalse。これは、フォーカスのスクロールが妨げられないことを意味します。preventScrollパラメータ値がyesの場合、trueそれはフォーカスのみを意味し、スクロールは意味しません。

例を見てみましょう。ここをクリックしてください。JSフォーカスpreventScrollパラメーター使用デモ

デモページには2つのボタンがあり、1つのボタンをクリックして直接フォーカスし、もう1つのボタンを設定し{preventScroll:true}ます。

最終結果は、次のGIF記録画面に表示されます。

ポジショニングではなくフォーカスとスクロールの効果

互換性

preventScrollパラメータの互換性は次のとおりです。


64歳以上✔	68 +✔	✘	✘	51 +✔	❓

Safariブラウザが手元にないため、互換性は不明です。フィードバックをお待ちしております。

3.IEブラウザでの処理

Internet Explorerはこの素晴らしいAPIをサポートしていません。このブラウザでサポートしたい場合はどうすればよいですか？

方法1：IE / Edgeをあきらめる

IE / EgdeはあきらめてChromeに行きました。彼をサポートしなければならない理由は何ですか？

方法2：ポリフィル

これがフォーカスポリフィルを書いた人です：https：//github.com/calvellido/focus-options-polyfill

ただし、IEブラウザでのフィールド使用によると、ピットがあり、効果が非常に奇妙なため、上記のポリフィルはお勧めしません。

方法3：一時的なパッチ

垂直スクロール距離を取ると、次のようにJSを処理できます。

var y = window.pageYOffset; 
button.focus（{ 
    preventScroll：true 
}）; 
// IEブラウザの処理
if（window.pageYOffset！= y）{ 
    setTimeout（function（）{ 
        document.documentElement.scrollTop = y; 
    }、0 ）
}

ただし、この方法は完全ではなく、ページが揺れる可能性があります。

私が実際のプロジェクトを扱う方法は方法1です。プロジェクトがIEブラウザーと互換性がある場合でも、IEブラウザーを直接無視します。結局のところ、これはエクスペリエンスの向上です。IEブラウザーを使用するユーザーが許容できる悪いエクスペリエンスはさらに大きくなります。 IEブラウザ自体は経験の浅い製品であるため、予想以上に多くのことがあります。

第四に、エッセイはまた結論する必要があります

focus()メソッドAPIは、ドキュメントではHTMLElement.focus（）として記述されています。つまり、通常の要素はデフォルトではフォーカスできませんが、適切なtabindex属性値を設定すると状況が変化するため、すべてのHTML要素にfocusメソッドがあります。この記事では、焦点を絞った、より詳細で興味深い知識を見つけることができます：「HTMLtabindex属性とWebページのキーボードアクセシビリティ」。

したがって、すぐ下で使用してもエラーは報告されません。

document.body.focus（）; 
document.createElement（ 'div'）。focus（）;

ただし、他の方法の場合、たとえば、submitエラーが報告されます。

//エラーが発生します
。document.body.submit（）はサポートされていません; 
document.createElement（ 'div'）。submit（）;

エラープロンプトを送信する

さて、それを言ってください。当初の予想よりも多く書くのに30分かかりました。