今回、現象が起きたのが、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のみにしているので、そこまで一瞬フッターがわずかに大きくなるのは気にならないと思います。
美しい方法ではありませんが、もし、同様の症状でお困りでしたらご参考までに試してみて下さい。