2020.10.23

cssのpositionなどでfixedを設定した時にIEでカクつく時の対処。jQueryなしver

CSSのposition:fixedやbackground-attachment: fixedなどを設定していると

IEではfixさせた要素がカクつきます。

これはCSSだけでなく、

javascriptなどでスクロールに合わせてmarginなどの値を変更した場合も同様です。

これはIEのスムーズスクロール機能を有効にしていると起きる現象ですが、webサイト側ではこの機能を制御することはできません。

そこで、スクロール自体を無効にし、その代わりにjavascriptでスクロールさせることでスムーズスクロールを疑似的に無効にする方法が有効です。

var $body = document.body;
if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident\/7\./) || navigator.userAgent.match(/Edge\/12\./)) {
  $body.addEventListener('wheel',function(e){
    
    var wd = e.deltaY,
        csp = window.pageYOffset;
    window.scrollTo(0, csp + wd);
    
    e.preventDefault();
  });
}

var $body = document.body;

if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident\/7\./) || navigator.userAgent.match(/Edge\/12\./)) {

$body.addEventListener('wheel',function(e){

var wd = e.deltaY,

csp = window.pageYOffset;

window.scrollTo(0, csp + wd);

e.preventDefault();

});

}

この方法は「創KENブログ」様のこちらの記事にて紹介されていましたものをjavascriptに編集したものとなります。

https://souken-blog.com/2017/08/25/ie11-smoothscroll/

最後に

今回行った様にjavascriptを使用してIEでもfixした時のカクつきなどを無くすことは可能です。

ただ、IEの場合スムーズスクロールなしで閲覧した場合実は結構サイトが見にくかったりします。

そのため、どうしても同じ表示にしなければいけない等の理由がない場合はtransitionでごまかしたり、fix以外の表示にしたりした方が良いのかもしれません。

JavaScript