CSS · OVERSCROLL BEHAVIOR
Scroll Boundary Lab
中をスクロールしていたのに、外まで動く。
LIVE SCROLL BOUNDARY
端の先へ、スクロールを渡す？
紫の枠の中で下へスクロール。端に着いたら、さらに下へ。
auto内側 INNER
端の少し手前
外側 OUTER
まだ動いていません
メーターは実際の位置を表示します。外側を直接操作した移動も含みます。デモの外への連鎖は止めています。
TAKE THE CSS
境界を決めるのは、内側。
JavaScriptはデモの切り替え・メーター・開始位置の準備に使用。スクロールの連鎖制御はCSSで行っています。
KNOW THE DIFFERENCE
止めるものが、違う。
| 値 | 親への連鎖 | 端のバウンドなど |
|---|---|---|
auto | 通常の動作 | 通常の動作 |
contain | 止める | 通常のまま |
none | 止める | 止める |
端のバウンドや発光はOS・ブラウザ次第です。演出がない環境では、contain と none は同じに見えます。
値を切り替えただけでは差は出ません。スクロール領域の端で、さらに操作して確かめてください。
背景のスクロールロックとは別です。
overscroll-behavior は、端に達したスクロールの連鎖などを制御します。モーダル表示中の背景を全面的に固定する機能ではありません。スクロールバーのドラッグや、位置を変えるだけのJavaScriptでは連鎖を再現できないため、ホイール・トラックパッド・タッチで試してください。
まず overflow: auto と高さ・幅を設定し、対象をスクロールコンテナーにします。このデモでは、縦は overscroll-behavior-y、横は overscroll-behavior-x だけを変更します。