IEでのスクロールイベントについて、パララックスを実装したいのですが、IEだけがどうしてもカクカクになってしまいます。IEではJSを切って見せたり、CSS3で上からイージングというのは最終手段として、何かうまく実現する方法をご存知の方おられましたらご教示お願い致します。
ちなみに現状、jQueryのon scrollイベントで取ったスクロール量をもとに対象要素のbackground-positionに対して動的に書き換えています。
あるあるやな。
いや、だからさ、バージョンぐらい書いたらどうなのよ。質問する人の最低限のわきまえとして。
windows7のIE11,10,9で同現象を確認してますので、恐らく全部のバージョンです。ちなみに
こういうサービスを利用すると、回答がつきやすくなると思われ。jsbin.com/fijaharugu/edit?html,output
画面上の位置を取る処理は意外と重くなりやすい。onScroll イベントは頻発するから、毎回処理するとショボブラウザことIEではカクつく。なので、onScroll 時にはsetTimeout で処理の予約だけしといて、実際に処理するのはonScroll完了後の1回だけになるようにして、要素のスライドをリアルタイムでの位置変更からアニメーションに変更すると、カクつきは軽減する。（ただし、リアルタイム性は減るので表現にもよる）
ご回答を参考に、IE9以下はsetTImeOutをIE10以上はrequestAnimationFrameを使って試してみたいと思います。サンプルまでご用意していただき、ありがとうございました。
みんなの回答 3 件
あるあるやな。
いや、だからさ、バージョンぐらい書いたらどうなのよ。質問する人の最低限のわきまえとして。
画面上の位置を取る処理は意外と重くなりやすい。onScroll イベントは頻発するから、毎回処理するとショボブラウザことIEではカクつく。
なので、onScroll 時にはsetTimeout で処理の予約だけしといて、実際に処理するのはonScroll完了後の1回だけになるようにして、要素のスライドをリアルタイムでの位置変更からアニメーションに変更すると、カクつきは軽減する。
（ただし、リアルタイム性は減るので表現にもよる）
JS Bin - Collaborative JavaScript Debugging
http://jsbin.com/xemuxesodu/1/edit?js,console,output関連するトピックス