先日、某案件でスクロールして奥に進むというページを作成しました。
IEを無視すれば意外とさくっと作れるものなのだという事を知ったので、忘れないように記事にしたいと思います。
ちなみに、今回使用するCSSのperspectiveプロパティは、まだ草案段階のプロパティですので、
今後変更がある可能性もある事をご了承いただきたいです。
先日、某案件でスクロールして奥に進むというページを作成しました。
IEを無視すれば意外とさくっと作れるものなのだという事を知ったので、忘れないように記事にしたいと思います。
ちなみに、今回使用するCSSのperspectiveプロパティは、まだ草案段階のプロパティですので、
今後変更がある可能性もある事をご了承いただきたいです。
サイト制作時に、必ずと言っていいほど使用しているスクリプトがあります。
ページ内リンク(アンカーリンク)のスムーススクロールです。
これはもう本当に毎回使用するので、手元のデフォルトのJSファイルには当たり前のように用意してあります。
しかし、先日書いた記事「【JavaScript】Chromeの最新版(61)から画面スクロール量を取得する要素がdocument.bodyじゃなくてdocument.documentElementに変わっていた事を知った。」にあるように、
Chromeの最新版(61)から、画面のスクロール位置を取得したりする要素が変わり、
今まで使用していたスムーススクロールが、Chromeでは動かなくなってしまいました。
これは簡単に修正する事ができましたが、少しひっかかる点があり、
今現在ベストな実装方法はどのようなものだろうと思い、考えてみました。
あくまでも、個人的なベストですので、ご了承下さい。
画面をスクロールしたら「ページトップへ戻る」ボタンがフワッと現れ、
下までスクロールしていくとフッター辺りでピタッと止まるという例のあれ。
ちょっとした機能のわりにはまあまあ面倒くさい作業の一つです。
何故面倒くさいかと言うと、
サイトのデザインによって、コンテンツやフッターとの位置関係が様々なため、
毎回同じスクリプトを微妙に使えなかったりするからです。
レスポンシブだったりするとさらに面倒くささが増します。
これだけの事に時間を使いたくないので、
ボタンの位置やフワッとするアニメーション等はCSSに完全にまかせる形にして、
表示、非表示、止める、の切り替えは、jQueryのコードをポンと貼り付けるだけで実現できないかと思い、考えました。
DOMを弄る場合、やはりjQueryが楽です。
画面をスクロールした時に、下から要素が現れたり、
その要素が画面の上部にたどり着いた時に何らかの処理をする、
という事をする時がたまにあります。
この処理をカッコ良く書くにはどのように書けばいいだろうかと思い、
色々と試してみました。
もっと正解はあるかとは思いますが、
僕のレベルとしては割りとシュッとしたコードが書けたんじゃないかなと思っています。
目標としては、
こんな感じの目標を立てて考えてみました。
タイトルが長くてすいません。 概要を全て詰め込みました。 タイトル通り、Chromeの最新版(61)から、JavaScriptで画面スクロール量(画面スクロールの位置)を取得できる要素が、 document.bodyじゃなくてdocument.documentElementに変わっていた事を知りました。 あるサイトの公開日に、クライアントのChromeは最新版、自分のChromeは最新版じゃない状態で、 自分の環境では問題なく動くのにクライアントの環境では全く動かないという事態が起こり、ものすごく焦りました。 ユーザーエージェントでスクロール量を取得する要素を判別している場合、この悲劇が起こり […]
Welcartを利用してECサイトを構築していて、
商品画像があるかないかで条件分岐する必要がある部分がでてきたのですが、
公式サイトのリファレンスを見ても書いてなかったので、自分で調べてみました。
さくらやロリポップのスタンダードプランとかでもSSH接続とか出来ることを恥ずかしながら最近になって知った人間です。
今まであまりGitとか積極的に使おうとしていなかったのですが、
仕事環境の変化とかもあり、今後頻繁にGitを活用していく事になりそうなので、
共用レンサバにGitを設定する手順を覚えておくための、割りと個人的なメモを記します。
ローカル環境はMac。GitクライアントはSourceTreeを使用しています。