【javascript】【CSS】IEで background-attachment: fixedが スクロール時にガタつく問題（矢印キーにも無理やり対応）Web開発者の備忘録よく「パララックス」効果と称して、背景画像を固定位置にするやりかたがあります。
スクロールしても、背景画像は追従しないアレです。
しかし、IEだとスクロールした時に背景画像がガタつく、という問題がありまして・・（割と有名らしいです）。
その解決方法についてご案内します。

参考にしたところだと

http://designpeke.jugem.jp/?eid=108
http://cloud-collector.link/2016/05/08/ie-fixed-scroll-bug/
など。
ブラウザーのスムーススクロール機能に頼るのではなく、マウスホイール時に、ホイール量に応じスクロールさせるやり方ですね。

上下矢印キーに対応していないので対応させる

これはこれでＯＫなのですが、問題はマウスホイール以外でスクロールさせたとき。
スクロールバー操作ではガタつくことは無かったのですが(Windows8.1+IE11 , Windows10+IE11）、矢印キーによる上下スクロールでは相変わらずガタつくようになってました。

ということで、矢印キーに対しても同様の対処を行うようにしたのが以下のコード。

$(function(){
	ua = window.navigator.userAgent.toLowerCase();
	if(ua.indexOf('msie') >= 0 || ua.indexOf('trident') >= 0) {
		$('body').on("mousewheel", function () {
			event.preventDefault();
			var wd = event.wheelDelta;
			var csp = window.pageYOffset;
			window.scrollTo(0, csp - wd);
		});
		$('body').on("keydown", function (e) {
			var keycode = e.keyCode;
			if ( keycode == 38 ) { // ↑
				event.preventDefault();
				var wd = 30;
				var csp = window.pageYOffset;
				window.scrollTo(0, csp - wd);
			}
			if ( keycode == 40 ) { // ↓
				event.preventDefault();
				var wd = -30;
				var csp = window.pageYOffset;
				window.scrollTo(0, csp - wd);
			}
		});
	}
});

かなり強引です。。
特に移動量が30ピクセル固定というのが恥ずかしすぎなのですが。。

ブラウザーから移動量を持ってこれればよいのですが、取り方が分からない・・。
誰か分かる人がいたら教えて下さい。。

ただ、まあそれなりに使える様にはなったかな、と思います。

早くＩＥ絶滅しろ！と思いました。。