CSS3 Transitionを使用してページスクロールをカスタマイズする方法

Question

CSS3 Transitionを使用してスムーズなページスクロールを作成する方法を探しています。私はJavaScriptを使ってそれを行う方法を知っていますが、CSS3でそれを行う方法があれば、私はそれをパフォーマンスの目的で好むでしょう。

Answer 1

transform: translate(x,y)を使用して「スクロール」をシミュレートすることができます。これは、transition-property: all経由のトランジションを使用してアニメートすることができます。現在、多くのCSS3のように、適切なベンダープレフィックスを追加する必要があります。

参考文献：Mozilla Dev Center: transform、Mozilla Dev Center: CSS Transitions

P.S. transform: translate()で慎重にパーセンテージを使用する - 要素がラップされる方法によっては、-100％はコンテンツの次の '表示高さ'の部分を意味することがあります

Answer 2

cssでスクロール動作を制御することはできません。 CSS3トランジションを使用すると、要素がある状態から別の状態に移動する方法を指定できます。スクロールはCSSにアクセスできないブラウザ機能です。