BLOGブログ

【Windows10 Chromeバグ】モーダルのマウスホイールのスクロールが効かない問題

takefushi / 2018.11.20

Web制作・ホームページ制作

今回、現象が起きたのが、Windows10のChrome「70.0.3538.110」でBootstrap4を使ったモーダル表示で、なぜかマウスホイールのスクロールだけが効かないという問題が発生しました。(しかも一部のPCのみ)

具体的な症状

モーダルはスクロールが表示されるぐらいの高さがあるもので、モーダル表示後は右側にはスクロールバーが表示されていて、カーソルを合わせてスクロールバーをいじることや、キーボードのパッドでのスクロールができます。しかし、マウスホイールのスクロールのみ何故かできない。しかも、IE11やEdgeでは問題なく動く、、、

こんな症状が初めてだと思い、原因を探りました。

ググったら、拡張機能の問題だったり、マウスジェスチャーのアプリのせいだったり、スムーススクロール「 chrome://flags/#smooth-scrollin 」が原因などと書かれていたが、どれも確認し試したが解決できませんでした。

Chromeの開発機能の検証で、要素を一部編集したり、ウィンドウの高さや幅を変えることでマウスホイールでスクロールができたりしました。

もう完全に意味不明すぎて困りました。。。

症状を直した方法について

症状から、JSで無理やり直せないかと思い、今回、行った直し方が以下になります。

var userAgent = window.navigator.userAgent.toLowerCase();
if (navigator.platform.indexOf('Win') != -1 && userAgent.indexOf('chrome') != -1) {
  $('対象モーダル').on('shown.bs.modal', function (e) {
    $('footer').css({"width" : "101%"});
    setTimeout(function(){
  		$('footer').css({"width" : ""});
  	}, 100);
  });
}

モーダル起動時にフッターをほんの少し大きくし、0.1秒後に戻すという方法で直しました。(無理くりですね;)

実行は、WindowsのChromeのみにしているので、そこまで一瞬フッターがわずかに大きくなるのは気にならないと思います。

美しい方法ではありませんが、もし、同様の症状でお困りでしたらご参考までに試してみて下さい。