プラカンブログSTAFF BLOG

2018.07.19

CSSで背景画像を固定にした時、IE11でスクロールするとがたつく問題

海外の調査でFirefoxのシェア率が10%を切ったという記事を見て衝撃だったOHMATAです。
確かに私も昨年秋頃のアップデートで愛用していたアドオンが使えなくなった時にメインブラウザをFirefoxからChromeに乗り換えました。
ネスケ→IE→Firefox→Chromeと渡り歩いてきましたが、今後また新しいブラウザが出てきたりするのでしょうか。

さて、先日背景画像を固定にした際、スクロール時にIE11でのみ画面がかくかくとがたついたんです。無視できないレベルのがたつきです。
原因は背景画像に「background-attachment: fixed」と指定したこと。
調べてみるとどうやらインターネットオプションにある詳細設定の「スムーズスクロール」が問題のよう。デフォルトではONになっています。良かれと思って入っているだろう機能が邪魔という…。
しかし、見る人全員に設定OFFにしてくださいと言えるわけもありません。

結論から言うと、強制的にこちらから設定をオフにする記述をすると直るそうです。
Javascriptの記述は以下の通り。
詳しい内容は参考サイトをご確認ください。

 if(navigator.userAgent.match(/MSIE 10/i) ||
 navigator.userAgent.match(/Trident\/7\./) ||
 navigator.userAgent.match(/Edge\/12\./)) {
 $('body').on("mousewheel", function () {
 event.preventDefault();
 var wd = event.wheelDelta;
 var csp = window.pageYOffset;
 window.scrollTo(0, csp - wd);
 });
 }

これでがたつくことなくスクロールできました。
個別ブラウザ対応しなくても完成できた時は気持ちいいですね。

参考サイト

+dc (大)

この記事は、OHMATA が書きました。