ドロワーメニューなどでの背景にあるページをスクロールさせない方法

自サイトに使えそうな簡単な方法ができていたのでメモとして。ただ結局Safariは未対応なのでそこを切り捨てられるか次第ですが。

実現したいこと

• ポップアップで目次のメニューを出す
• 画面が狭い場合にポップアップ内をスクロールさせる際に、背景にある元のページをスクロールさせないようにする

ページの上に被さる要素内でスクロールが可能な場合、その要素内でスクロールが上端下端に到達すると、背景にある元のページがスクロールしてしまいます。これによる深刻な実害はあまりなさそうですが、見た目的にも操作感的にもあまりよくないのは確かなのでできれば背景は動かしたくないところです。

サンプルコード

body {
  overscroll-behavior: none;
}

必ずしもbodyである必要はないと思いますが、ともかく全体のラッパー要素にoverscroll-behaviorを設定するだけです。詳細は以下のMDNのページで。

• overscroll-behavior – CSS: カスケーディングスタイルシート | MDN

EdgeとSafariはバグありのようですが、Edgeは無視してSafariはCan I useではTP(Technology Preview)と書かれていた(2020.11現在)ので先行きは明るいと思われます。

結び

IEがなくなった後はSafariが足を引っ張ると見た覚えもありますが、今回はたまたまそんな感じでした。

ちなみに今回これを自サイトに使おうと思ったのは、Twitterの検索部分の動作を調べた際に使われていたからです。とはいえTwitterならスマホはアプリでしょうし、スマホ対応的な意味では参考にする対象ではないですね。