Studio
Happyvalley

ページも
ふんわり
スクロール

今度はJSでアニメーション

image: ページもふんわりスクロール
Toplabo
Page Scroll

またまたJSでスクロール

概要

  • 一時CSSのtransformでページスクロールを作ってました。JSと違ってふんわりスクロールする感じが気に入ってましたが、唯一ウインドウの右端のスクロールバーが連動しないのが難点に感じてました。ところがまたJSでもふんわりとスクロールできるようになってました。

機能の説明

  • メニューのリンク先にふんわりとスクロールします。リンク先のオブジェクトの座標を取得してその座標を関数へ渡す簡単な仕様です。

技術仕様

  • ・window.scroll()という関数を使ってます。
    オプションで
    window.scrollTo({
    top: 指定の座標値
    behavior: 'smooth'
    });
    とするとゆるゆるとスクロールします。
    技術的にはCSSのscroll-behaviorと同じようです。
    下記にMDNの解説ページを参照してますが、相対スクロール、オブジェクトのスクロールなど簡単に実装できるようです。

後記

  • window.scroll()はCSS transformより格段に使いやすです。
    以前CSSで制作したときは右横のスライドバーが連動しなかったのでスクロールしたあとで無理やりスクロールバーをアニメーションさせてつじつまを合わせてました。そのため不具合も多くあんまり使ってませんでしたが、これならどんどん使えますね。
    IE以外のブラウザはEdgeを含めすべて対応しているようです。
    まあ、不満点としてはアニメーションのeasingや時間が選べないこととなどありますが、記述するコードの量を考えたら戻ることは考えられません。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/02/fig-1.png

『ページもふんわりスクロール』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら

Permanent Exhibition