初心者でも作れるスクロールインタラクション。第1回 JavaScript

こんにちは:)

 

更新案内:)

 

1. jqueryを使ってスクロールインタラクションを制作する部分の実習と説明をともに授業がすべて追加されました。

もし授業が難しい方がいる場合は、コードを書いて説明する実習編の授業を先に参考し、次の説明編でもう一度理解するパターンを使用すると良いようです。

 

 

2.セクション5-2セクション移動インタラクションにバグが見つかりました。このバグはMAC環境のChromeブラウザでトラックパッドを使用したときに発生しました（iMacマジックマウスは問題ありません）

バグの内容は

1つずつ移動するセクションがブラウザの一番上に配置されているときにトラックパッドなどを利用してクイックスクロールする場合

一番最初のセクション移動アニメーションが実行されず、その後からアニメーションが実行される場合です。 (断続的に発生)

 

そのバグを分析した結果、Macのような場合、移動するセクションに入ると問題が発生します。

セクションに入ったときにスクロールイベントが機能しないことを指定しました。

つまり、wheelイベントを追加してセクションに入るとき、wheelをブロックして分岐処理してイベントに対するデフォルト動作をしないように指定して解決しました。

 

しかし、wheelイベントのみを使用すると、Windows環境でバグが発生しました。

Windows環境でwheelイベントのみを使用するとバグが発生する理由は

Windowsでは、マウスホイールイベントが発生する頻度がMacに対して非常に低いため、スクロール値を正しく取得できないバグが発生しました。

簡単に言えば、スクロールイベントとホイールイベントが呼び出される数が異なるということです。

 

そのため、ウィンドウでは既存に作成されていたコードをそのまま使用するように処理します。

つまり、Macではwheelイベントを使用し、Windowsではscrollイベントを使用するように分岐処理する授業が追加される予定です。

 

このバグは、MacでもChromeでのみ発生するバグラグーグルでパッチができるので、既存の授業を変更せずにバグ修正映像を上げるようにします。

（UI実装時にスクロールイベントでスクロールの位置を変更するときにモーションを入れると作業が少し面倒です。）

 

3.バニラjs 変更作業がすべて完了しました。

既存のジェイクエリーで作成されていた部分をバニラjsに変更する授業が追加される予定です。

そのコードは、ieと古いブラウザを考慮せずに書かれています。

 

バニラjsコードの変更が簡単すぎるので、セクション5、6を除く残りは初心者の方も自分で変更できると思います。

 

バニラjsに変更した完成コードはセクション別の最後のstepファイルに作成され、まずアップロードする予定です。 （1月末～2月上旬）

 

そしてバニラjsに変更する過程の授業は2月中にすっきりアップロードする予定です。

更新された授業が苦労している方に多くのお役に立てば幸いです。

 

 

では、明けましておめでとうございます。

ありがとう：D