2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【CSS】scroll-behaviorの罠、スムーススクロールを有効にすると画面外のフォームエラーが表示されない

Last updated at Posted at 2023-08-29

scroll-behavior: smooth; 便利ですよね。
これ一行で今までJavascriptで書いていたスムーススクロール処理が不要になりました。
めでたしめでたし

ん?

フォームがおかしい・・・

画面外でsubmitボタンを押して、requiredやpatternのエラーに引っかかった時、なぜかヒント表示されない

Firefoxのみうまくいく模様。
Edge、Chromeはダメ。
(当方Windowsなのでsavariは未検証)

スムーススクロール(scroll-behavior: smooth;)が発火するとヒントが消えちゃうってどんな罠だよ・・・

結局Javascriptでスムーススクロール書くしかないの?
それともバリデーションをコンポーネントで作れっていうこと?

ブラウザ側の対応待ちでいいのかしら・・・?

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?