コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

スムーススクロールの実装

スムーススクロールを実装しようと思ったんだ

はい、おはようございます。僕です。どこかでCSSでやるスムーススクロールの実装みたいなことを書いた気がしたんですけども自分の書いたろくでもない記事見返してみてもそういう記事なかったんで今更それの実装方法でも書こうと思います。やろうと思った理由はなんとなくです。実のところ、もう流石にこういうのにjQuery使わなくてもいいでしょとか思ったからです(正直)。

さて、スムーススクロールがどういうものなんですけどもクリックしたときに指定した場所にするするとスクロールするやつです。




ということでやり方です。
developer.mozilla.org

body {
  scroll-behavior: smooth;
}

bodyあたりにこれを組み込めばできます。スクロールの対象を一部にしたい場合は対象の部分に上のCSSを指定してやってください。

各ブラウザの対応状況についてはこんなんです。
f:id:andron:20201224135402p:plain
InterberExplorerは令和の時代に存在しないはずのブラウザ(?)なので実質全ブラウザ対応ですね(?)。

実際に動かしてみるとこうですね。

これで簡単にスムーススクロールが実装できました。簡単ですね。





さて、こういうので終わらせると面白くないのでスクロールスナップについても見ていくなどしようと思います。
developer.mozilla.org
こっちもInterberExplorerと呼ばれる存在しないブラウザ以外は全部対応していたと思います。詳しくはちゃんとしたところみて(丸投げ)。


こういう感じのことできます。スクロールバーを動かしたときに任意の場所にピタッとやってくれます。スクロールバーが表示されてださい点を除けばサクッとつくれるスライダー的なものにつくれそうですね。

詳細はリンクの方読み込んでもらうとしてざっくりした構文は以下の通り

scroll-snap-type: [x | y | block | inline | both] [mandatory | proximity ];

x、yで指定する部分はまあなんとなくわかるとして mandatory と proximity については一言書いておこうと思います。

mandatory

このスクロールコンテナのビジュアルビューポートは、現在スクロールされていない場合はスナップポイント上にあります。つまり、可能であれば、スクロールアクションが終了したときにそのポイントにスナップします。コンテンツが追加、移動、削除、またはサイズ変更された場合、スクロールオフセットは、そのスナップポイントでの静止を維持するように調整されます。

proximity

このスクロールコンテナのビジュアルビューポートは、ユーザーエージェントのスクロールパラメータを考慮して現在スクロールされていない場合、スナップポイント上に静止する可能性があります。コンテンツが追加、移動、削除、またはサイズ変更された場合、スクロールオフセットを調整して、そのスナップポイントでの静止を維持することができます。

こんなです。mandatoryは何があっても強制的にスクロールさせて、proximityは中途半端な位置にとまるとスクロールをやめてくれるみたいな仕様っぽいです。


というのがあるそうなのでスムーススクロールを実装したいときに記憶の片隅にあると便利かもね。


おわり