Scrollifyがスムーズに動きません

Question

はじめまして。

Scorliffy（https://projects.lukehaas.me/scrollify）という画面のスクロールをスムーズにすることができるjQueryのライブラリを使って、上から下にスクロールの画面遷移を実現したいです。

この画面遷移を実現したいのですが、通常の使い方ではなく

『ある一定の条件を達成したときに次のセクションにスクロールできる』

という仕様を実現する必要があります。

開発中のアプリはReactで作っています。

this.state = {
  section: {
   first: true,
   second: false,
   third: false
 }
}

<section
  id="section-one"
  class="scroll"
  style={{ display: this.state.section.first ? 'block' : 'none' }}
  >
　セクション1です。
</section>

<section
  id="section-two"
  class="scroll"
  style={{ display: this.state.section.second ? 'block' : 'none' }}
  >
　セクション2です。
</section>

<section
  id="step-three"
  class="scroll"
  style={{ display: this.state.steps.three ? 'block' : 'none' }}
  >
　セクション1です。
</section>

$.scrollify({section:".scroll"});

heightはきちんとそれぞれ値が表示されるみたいですが、最初にdisplay:noneになっているかのなのか、スクロールが正常に動いていません。

別のやり方などあれば教えていただけると嬉しいです。

Answer 1

HTML,CSSでこういうのを組んでlocation.hrefでやる方法があります

※デモではJS動かしてません
https://thimbleprojects.org/liveasnotes/533074/#s00

右上のリミックスボタンでソースコード見れます．
.dnクラス（display:none;）を付与すれば，強制的に非表示にもできますし，:targetを使った擬似的な画面遷移も有りだと思います

• [CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点

Answer 2

JavaScriptの処理は重いものです。
ダメならCSSのtransform使うとかですかね？
せっかくオープンソースなのですから
中を覗いて実装を確認し、デバッグすることをお勧めします。