背面のスクロールを抑えたい

みなさんどうもこんにちは！
フロントエンドエンジニアのぽよです。

今回は、cssのoverscroll-behaviorが便利だよというお話です。

overscroll-behaviorって？

overscroll-behaviorは、スクロール可能なコンテンツが前後に重なっている時、
前面のコンテンツを端までスクロールしたあとの挙動を制御することが可能です。
どういうことかと言うと、

ハンバーガーメニューを開く
　↓
最下部までスクロールする
　↓
もっと下までスクロールしようとする
　↓
ハンバーガーメニューを閉じる
　↓
元々いた地点よりも下にいる

といったスクロールチェーンと呼ばれる、
背面コンテンツが意図せずスクロールされてしまう現象を防ぐことができます。

ちなみにですが、最新のプロパティ！ということではなく、
本当はchromeなどでは数年前からサポートされていましたが、
safariが対応していなかったので今まであまり実用的ではありませんでした。
しかし、2022年9月にリリースされたsafari 16から利用可能になったのです。

値による違い

overscroll-behaviorの値には、auto contain noneの3つがあります。
初期値であるautoでは、これまで通りスクロールは伝達します。

背面のスクロールを抑えるにはcontainもしくはnoneを使用します。
この2つの差は何なのかというとオーバースクロールを有効にするか否かです。
オーバースクロールとは、
コンテンツ最上部でさらに上方向に動かした際にリロードが行われるあれのことです。
Pull-to-Refreshとも呼ばれています。
containではこの動作を有効にし、noneでは無効にします。

古い対応方法

これまではjsを使ってbodyにoverflow: hidden;を付与し、
safari用にposition: fixed;も付与していました。
でもそうすると最上部まで戻っちゃうからどうにかしなきゃ…
など、いろいろとやることがありました。

これからの対応方法

しかし、これからはcssを1行書くだけで解決できます。
overflowプロパティでautoもしくはscrollが指定された前面コンテンツに
overscroll-behaviorプロパティを指定するだけです。

注意点としては、
overflowプロパティが設定されていたとしてもスクロールバーが表示されない場合、
overscroll-behaviorプロパティは無視されてしまう点です。
前面コンテンツの中身が多くスクロールバーが表示される場合のみ適用されるということですね。

おわりに

overscroll-behaviorプロパティをサポートするブラウザが増えたことで、
煩雑だったスクロールチェーンの制御をシンプルに行なうことができるようになりました。
ハンバーガーメニューだけでなくモーダルウィンドウなどでも利用可能なので、
積極的に活用していきたいですね。

それではー。