web-dev-qa-db-ja.com

Chromeの非表示のCSSスクロールスナップしきい値とその変更方法

私はコンテナを持っています：

scroll-snap-points-y: repeat(100%);
snap-type: mandatory;
snap-type: y mandatory;

そして3人の子供：

height: 100%;
scroll-snap-align: center;
scroll-snap-stop: always;

これはFirefoxで期待どおりに機能しますが、Chromeでスナップするためのしきい値があるようです。少しだけスクロールすると、Chromeは最初の子に戻りますが、Firefoxは次の子にスクロールします。子の高さの約30％をスクロールした後のみ、Chromeは次のものにスナップします。

この動作は this code pen で確認できます。

この非表示のしきい値を無効にしてChromeすぐに次の子にスクロールする方法はありますか？

cssgoogle-chromescroll
18
r0skar

一般にscroll-snapに関するChromium Bugsの議論に基づいて、意図は勢いを判断することです（スクロールでは難しい、スワイプで少し簡単）が、実装は少し不安定です。

提案はscroll-snap-stop: alwaysを利用して、その勢いの意図をオーバーライドすることです（これはあなたが行ったものです）。ただし、scroll-marginおよびscroll-paddingは、あるスナップポイントから次のスナップポイントへの移動に影響を与える可能性があることにも言及しています。

CSS Snap Scrolling from Google

Overscroll-behavior API をsnap-scrollと組み合わせて確認することもできます。

4
Bryce Howitson

あなたが説明するしきい値は、（デスクトップ）Linuxで75.0.3770.100の場合、50％に近いようです。

2つの要素間の中点をビューポートの真ん中の直前までスクロールした場合、古い要素は元に戻りますが、中点をビューポートの真中の直後に移動した場合、新しい要素がスクロールして表示されます。したがって、しきい値は50％のようです。

この動作mayは、以下に大きく関連しています。

https://cs.chromium.org/chromium/src/cc/input/scroll_snap_data.cc?q=scroll-snap+&dr=C&l=152-155 ：

// If snapping in one axis pushes off-screen the other snap area, this snap
// position is invalid. https://drafts.csswg.org/css-scroll-snap-1/#snap-scope
// In this case, we choose the axis whose snap area is closer, and find a
// mutual visible snap area on the other axis.

よく分かりません。

上の検索でsnap-scrollが見つかりました。このクエリの結果のほとんどは、HTMLファイルとテストモックで構成されています。

私が見つけた他の2つの関連のある結果は

1
i336_

一時的に削除できますscroll-snap-align オン :hoverそれを次/前に進めるために、私は推測します：

#carousel.snap > div:hover {
  scroll-snap-align:initial;
}

https://codepen.io/anon/pen/BXwYPa

0
jayms