ポテゾーン

タイトルの通りですが、ある日私はjQueryでページスクロールを実装していました。

そして、１ヵ月後くらいに思い出したかのように作ったjsファイルを読み込みページスクロールを適用させたところ、謎の挙動に見舞われました(´っω・`)

 

ページを遷移するときにanimateで、ぐいーーんと動かしているんですが、１ページ目　→　２ページ目　に遷移する際に、瞬時に２ページ目が出てきてしまう・・なぜだ・・(|| ´д `)

２ページ目　→　１ページ目は正常に動く・・ますます謎は深まるばかり。

 

当時サンプルで作っていたhtmlでは正常にページ遷移できている・・

 

 

１ヵ月前の私など信用なりません。
まずはちゃんと処理が動いているか確認しましょう。

話はそれからだ(`・ω´・+)ｷﾘｯ

 

そもそも、animateしているわけなんで、topが動的に動いているはず。

ということはanimateの速度を5000msくらいにして、検証ツールで見れば簡単なこと。

 

まずは１ページ目の要素を見てみる。

１ページ目　→　２ページ目　なので、ちゃんとtop:0からtop:-xxと、マイナス方向（上方向）に移動していっている、大丈夫だ、問題ない(`・ω・´)

 

次に２ページ目の要素を見てみる。
これがいきなり出るってことは、なぜかtopがいきなり0になってしまっているということ。

 

うん、問題なく、top:xxから5000msかけてtop:0に・・

 

 

 

 

・・(° д °；)は？

 

 

 

いやいや、topはぐりぐり動いているけど、要素がついてきてませんがががが(|| ´д `)

 

 

次の作戦に参ります。

 

 

もうすでに調査する前から結果が見えてる気がしますが、未知の不具合に遭遇した場合には何でもやってみるしかありません。

google先生も「ページスクロール」「js」「変な挙動」とかじゃ教えてくれません(´っω・`)

 

 

２ページ目のtopを直接動かしてみて、果たして動くかどうか・・

まぁ・・どうせ動かないんでしょ・・？

 

 

 

 

 

 

 

 

・・(° д °；)！！！？！

 

 

 

 

う、動いた・・

 

 

 

 

 

 

 

 

 

 

・・固定してるヘッダーが・・(|| ´д `)

 

 

 

これ以上謎を増やさないでください。まじ勘弁してください(´っω；`)

 

しかも、最初に上方向に動かすとヘッダーが動き、下方向に動かすと何も起こらない・・

上方向でヘッダーが動いたあと、下方向に動かすとtop:0を過ぎた後に正常に２ページ目が動き出す・・

 

 

お、おら・・そわそわしてきたぞ・・(|| ´д `)

 

 

 

あるあるですね(´・ω・`)

 

まぁ・・ざっと見た感じフォント系のjsしか読み込んでないんですけどね・・

 

 

・・念のためOFF・・

 

 

もちろん挙動は変わらず(´っω・`)

 

そして、ここへ行きつく(´・ω・`)

absoluteで謎の挙動したり、flexで謎の挙動したり、はよくある話。

 

２ページ目の中身を見てみると、予想通りabsoluteやらflexやらを使っている。

 

 

 

この勝負、いただきました(`・ω´・+)ｷﾘｯ

 

 

でもabsoluteは親要素動いたら、連動して動くし、flexかなー。

 

まぁいいや、２ページ目は高さと幅だけ残して適当にbackground-colorつけて中身全部消しちゃおう(`・ω・´)

 

 

 

さぁ、おかえりなさい、正常なページ遷移ヽ(・ω・`*)ﾉ

 

 

 

 

 

・・帰ってこないΣ(・ω・`ノ)ノ

 

 

 

 

どないしたらいいのん・・ orz

 

 

 

Chromeで見てましたが、IEとかFirefoxでも見てみます(´・ω・`)

 

 

 

 

はい、ブラウザ依存とかではない、と(´っω・`)・・まぁブラウザ依存とかでも困るんだけど・・

 

 

もうこれしかない(`・ω・´)

動いてるソースがある以上、真犯人はこの中にいるッ(`・ω´・+)ｷﾘｯ

 

 

１ページ目も空。

なおらない。

 

２ページ目は既に空。

なおらない。

 

CSSも高さと幅だけ直書きしてOFF。

なおらない。

 

 

 

 

 

・・(° д °；)why?

 

 

 

 

 

属性も必要最低限以外消す。

 

 

 

 

・・ヽ(・ω・`*)ﾉきたーー！！！

 

 

何がいけなかったのか・・

１つずつ属性を復活していくと・・

 

 

id=”page2″

 

・・これのどこがいけないのか・・(|| ´д `)？

 

 

id=”page3″にしてみる・・

 

問題ない・・

 

id=”page1″にしてみる・・

 

問題ない・・

 

 

 

・・あ(° д °；)！！！

 

 

 

 

 

 

 

url : 192.168.xx.xx/index.html#page2

 

 

 

 

該当ページに直接飛べるようにつけたハッシュパラメータと、今回ページにつけた名前が同じ・・だと・・orz

ページ遷移するたびにurlのハッシュパラメータを書き換えてるから、ハッシュパラメータついてる要素に飛ぶよね、そりゃ・・(´っω；`)

 

まさかそんな自爆オチとは(|| ´д `)

外に見えるパラメータだからprefixつけなかったのがいけなかったのか・・

 

 

idをつけるときは注意しましょう(´っω；`)

 

そして、結局macのChromeだけ background-attachment: fixed; を複数使ってたら、topを動的にいじったときに画像が重なって表示される現象により、今回はページスクロールを断念するのであった・・orz