4
4

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 5 years have passed since last update.

(メモ)position:sticky内のformにfocusあてたらスクロールしてしまう。

Last updated at Posted at 2017-08-03

簡単なメモで恐縮です。

<section style="position:sticky; top:10px; z-index:10;">
<form>
<input type="text" />
</form>
</sction>
<section class="go-scroll">
</section

的なものがあった場合、

スクロールして、「position:sticky」が生きている(固定されている)状態でinputにfocusをあてると、

  • andorid(chrome) : 背後でスクロールしてた[.go-scroll]がトップに戻る
  • PC(chrome) : スクロール開始前の状態に戻る

という状況になっており...。

iOS(safari)で、時刻表示のところをタップするとトップに戻るを使えるように保つため、
どこかのsectionに「overflow-y: scroll;」的なことができないので...

  • 「position:sticky」やめる
  • jsでscroll量取得して、クラス付け替え
  • 「position:fixed」で対応

にしなきゃなのね。。。
わーい!sticky便利~~って思ったのに残念。

しかも、focusあとに半角入力と、全角入力でもふるまい違うんだよな。。。
なんだろ。。。

4
4
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
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?