CSSのscroll-snapが効かない場合の対処法

hoge

scroll-snapでスルスルスライドショーを実装しようと思ったら、動作しない。
ちゃんとお作法通りに記述しているのに！

 

■親要素
scroll-snap-type: y mandatory;

■子要素
overflow-y: scroll;

 

対処法

 

いろいろ試しまくって、これで解決！ ↓

 

■親要素
scroll-snap-type: y mandatory;
overflow-y: scroll; /* ★コレ */

■子要素
overflow-y: scroll;

縦にちゃんと収まっていてoverflowしていなかったとしても、動作しない場合はここを確認してみると、なんらかのなにかが発生しているのかも。

 

それでも動作しなければ、ここらへんも確認する事。

 

■親要素
position:relative; /* ★明示的に */
height:100%; /* ★ダメ押しで高さを設定 */
scroll-snap-type: y mandatory;
overflow-y: scroll; /* ★コレ */

■子要素
overflow-y: scroll;