スクロールイベントで要素を下からふわっと表示させる場合
posted : 2018.04.10
こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。
このサイトではちょくちょくjQueryスクロールイベントで要素をふわっと下から表示させています。
で、その表示タイミングがちょっと気になったのでメモ。
正当な方法ではない（そもそも理屈があってない可能性もある）かもなんですがね汗
要素の表示（スクロールイベント発火）タイミングが若干遅い
何となく気になったんですよね。
明らかに遅い！っていうわけでもないんですけど、要素がウィンドウにフレームインしたタイミングでイベントが発生するはずなのに、なんかちょっと遅いんですよ。
で、ちょっと考えてみたらああそうか、と。
このサイトの場合、ターゲット要素に予め「transform: translateY(50px);」を指定してます。
んで、ターゲットの位置までスクロールしたらjQuery + CSSで「transform: translateY(0);」にしています。
つまりターゲット要素の初期位置は実際に表示される位置よりも50px下にあるわけです。
僕が実際にイベントを発火させたいタイミングは実際の表示位置だったもんで、コードを下記に変更しました。
要はターゲット要素の初期位置から50px分を引いたものをターゲット位置（実際の表示位置）として、そのタイミングでイベントを発火させる、という感じ。
言い換えればイベント発火を50px分早めるというものです。
んで試してみたら思い通りの挙動だったので解決としました。
まあでもたぶんこんなこと普通しないかもですね（苦笑）
場合によってはイベント自体見えないケースもあるかもしれないですし。
ただ色々と表示テストをした結果、ちょっと遅いイベントタイミングが気になる場面の方が多かったのでとりあえずそんな感じで対処しました。
場合によってはこっそり戻すかもしんないです（爆）
スクロールイベントの発火タイミング誤差の要因としては、画像の読み込み前にターゲットの位置が取得されてしまう場合などがあります。
でもそれに加えて、下からふわっと表示される系処理の時は上記のような事も考慮すべきケースがあるのかもしれない、とぼんやり思いました。
