タグ

iphoneとスクロールに関するh1rokey0401のブックマーク (1)

  • iOS の Safari で Sticky (スクロール固定) 要素がカタカタしてお困りの時は | WP-E (仮)

    スクロール位置に応じて画面内に固定されたりされなくなったり、そんな要素を Sticky 要素と呼んだりします。スクロールをトリガーに CSS の position プロパティを切り替えて実装するのが一般的なやり方と思いますが、iOS の Mobile Safari だけはスクロールを一度止めるまで position の変更が反映されない現象が起こります。 文字で説明しても全く分からない気がしていますので、次の画像を御覧ください。 こんな感じで一度スクロールをやめるまで、position: fixed に切り替わって上部に固定されるはずのその要素はまるで応答無く画面外へと消えていきます。メニューを使った例ですが、メニューでなくとも同様です。これは PC ブラウザや Android 端末では発生せず、スクロールイベントの実行頻度を下げたり、Passive Event Listeners を用い

    iOS の Safari で Sticky (スクロール固定) 要素がカタカタしてお困りの時は | WP-E (仮)
  • 1