jqueryを実装したら検証ツールのエラーがでてきました。

Question

前提・実現したいこと

js初心者です。

【前提】
今回、私は横スクロールサイトを作成しました。
jsの実装は上手くいき、マウスホイールをすると縦ではなく横に進むようにできました。
しかしマウスホイールをする度に検証ツールで以下(発生している問題・エラーメッセージ参照)のようなエラーメッセージが出てきます。

【実現したいこと】
エラーを消すこと。
他力本願に近いので、参考サイトなどいただけますと幸いです。
頑張って直してみたいです。私ではどれが参考になるのかもわかりませんでした。
何を見て、どこを直すかなど知りたいです。
お力をお貸しいただけますと幸いです。

発生している問題・エラーメッセージ

↓検証ツールにて発生↓

jQuery.min.js:2
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312

preventDefault @jquery.min.js:2
dispatchb @jquery.min.js:2
@jquery.mousewheel.min.js:8

当方が書いたmain.jsのコード

$(function() {
        //コンテンツの横サイズ
        var cont = $('#contents');
        var contW = $('.box').outerWidth(true) * $('div',cont ).length;
        cont.css('width', contW);
        //スクロールスピード
        var speed = 30;
        // var speed2 = 10;
        //マウスホイールで横移動
        $('html').mousewheel(function(event, mov) {
            $(this).scrollLeft($(this).scrollLeft() - mov * speed);
            $('body').scrollLeft($('body').scrollLeft() - mov * speed);
            return false;   //縦スクロール不可
        });
    });

試したこと

scriptを書き直したりしましたが、そういうことではないように感じました。

Comments

[int32_t]

コードを開示してください。

[dmm]

int32_t様
コメントありがとうございます。
すみません。コード開示はjquery.mousewheel.min.jsでしょうか？もしくは、私が書いたmain.jsの開示でよいのでしょうか？
良く分かっておらずに申し訳ございません。

[int32_t]

質問者さんが書いたコードです。
jquery.mousewheel.min.js の方は公式サイトへのリンクなどあると調査しやすいですね。

[dmm]

int32_t様　
ご迷惑をおかけしております。開示いたしました。

Answer 1

もし、そのページが縦にスクロールする余地がない(ページの中身が縦方向にはみ出ていない)なら、縦スクロールを禁止する理由はないので return false; //縦スクロール不可 を return true;にすれば直ります。

縦にもスクロール可能なページで縦スクロールを禁止する必要がある場合、mousewheel() は利用不可です。

window.addEventListener('mousewheel', function(event) {...},
    {passive:false});

のように addEventLisetner() を使って passive:false を渡してください。

---

wheel mousewheel イベントリスナがページのスクロールの滑らかさを損なうことがとても多かったため、これらのイベントはデフォルトでは規定動作のキャンセルができなくなっています。

Comments

[dmm]

int32_t様
ありがとうございます。無事、解決いたしました。