元外資系マーケッターが語る戦略的マーケティング

元外資系マーケッター金泉勇次のブログ。中小企業、個人事業主、副業の学生や主婦までをサポートするビジネス・マーケティング・アドバイザーです。

【JQuery不要】IE,Edgeのスクルールをカクカクさせない

IEとEdgeで背景をFixedにするとスクロール時に背景画像がカクカクとズレてしまう現象は昔から知られているが、対策を検索するとJQueryありきの対策しか表示されず、コピペだけの空っぽブログが多いことに落胆する。

(検索サイトもコピーサイトのランクを下げる努力をしてほしいものである)

 

JQueryありきだとコピペでは動作せず、エラーもでないという素人には何が起きているかも分からないような状況になる。私は使ってもいないコードが入るのが嫌なので、JQueryは使わない。

 

そんなわけで、JQuery無しのカクカク抑制プログラムを作った。

 

window.onload = function () {
  document.body.onmousewheel = function(){
    if(navigator.userAgent.match(/MSIE/i) || navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/Edge/)) {
      event.preventDefault();
      var wd = event.wheelDelta;
      var csp = window.pageYOffset;
      window.scrollTo(0, csp - wd);
    }
  };
}

 

やっていることはJQueryのものと同じだが、JQuery無しで動く。それだけ、

なんでこんなものが検索結果にでないのか?疑問で仕方ない・・・

 

簡単に作ったので、細かい話をすれば、IE、Edge、Tridentの文字列も細かいバージョンを指定するところだが、面倒なので主要文字だけの決め打ちにしている。

 

簡単に動作確認をしたところ、特に問題なさそうなので、乗せておく。何かあるかもしれないので、トラブルがあったら、コメントにでも入れてもらえると助かります。

 

余談だが、コンパイラーを使う言語であれば別だが、スクリプト言語で汎用ライブラリを使うのは控えるべきだと私は思う。