CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック

スクロールの連鎖（スクロールチェーン）とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。 モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合など、スクロールチェーンしないように実装するCSSのテクニックを紹介します。 Prevent Scroll Chaining With Overscroll Behavior by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールチェーンとは 古い解決方法 今の解決方法: overscroll-behavior overscroll-behaviorの使用方法 終わりに はじめに posi

[coliss]

モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合など、スクロールチェーンしないように実装するCSSのテクニック。

[daigo0117]

古い方法ではsafariに対応することができなかった。しかしこの新しい方法なら簡単に実現できる。ただしsafariは未対応だ！←はぁ？

[ultimatebreak]

SafariのせいでめんどくせえことしないとならないのにSafariがこれに対応してないんじゃ意味ないんだよなあ…ようやくIE対応しなくても良い案件が出てきたのに今度はSafariに時間をとられている

[ttkazuma]

IEの遺志を継ぐもの "Safari"

[napsucks]

モーダル死すべしなのであまり賛同できなかった。

[hachiame]

“プログラミングに不可能はありません。きっと解決方法があるはずです。 ”

[primedesignworks]

スクロールの連鎖って何の話だって思ったけど、そういうことならモーダルの開閉時に裏のスクロールを有効/無効にしてる。面倒だけどユーザのことを考えたら実装せざるを得ない。

[uva]

Safari...

[Falky]

『クライアントはこう言いました。「プログラミングに不可能はありません。きっと解決方法があるはずです。」ちなみに「プログラミング」とはこの場合、CSSのことを指しています』どこからツッコめばいいのか……

[aceraceae]

スクロールチェーンはまだしもスクロールするコンテンツが階層化しているときにちゃんとポイントしていても正しくスクロールしてほしいコンテンツがスクロールしてくれないとイラッとくる。

[spark7]

iOSのこの辺の実装が酷くて大変な目にあったな。モバイルサイトのハンバーガーメニューでスクロールあるやつは鬼門。/ Safariに必要な機能なのに...「このプロパティはSafariを除く」

[mayumayu_nimolove]

連鎖とかそんなダサいの見たことない

[coppieee]

“Safariを除く”

[shirotorabyakko]

"overscroll-behaviorプロパティは、スクロール領域の境界に到達したときにブラウザが実行する動作を設定します。このプロパティはSafariを除く、すべての主要ブラウザでサポートされています。"

[arapro]

Safariー！早く対応してくれー！

[gla69]

ブクマはするけど「Safariを除く」では全く意味がないんだよな….…

[kawaosa]

スクロールチェーン