質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.37%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1266閲覧

横スクロールページで使用しているjsによるマウスホイールの制限をモーダルのみ解除したい

mmmm00099

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/03/27 09:09

こんにちは、質問をご覧いただき有り難うございます。
お知恵を拝借したく質問させていただきます。

前提・実現したいこと

Safariでマウスホイールで動く横スクロールページのモーダルを縦スクロールできるようにしたい。
もしくは、以下mousewheel()のイベントハンドラをモーダルが開いた際停止、または削除したい。

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

マウスホイールで、横スクロールがされるようにjsでイベントハンドラを設定しています。
モーダルのクリックイベントで横スクロールのイベントハンドラを削除したいのですが、削除されません。
モーダルが縦スクロールをできないのはSafariで閲覧した場合にのみ発生します。

該当のソースコード

var scrollElm = $('.scrollPanel'); var wheelLength = 1.5; function mousewheel(){ var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll'; $(document).on(mousewheelevent,function(e){ scrLeft = $(window).scrollLeft() - wheelLength; if(e.originalEvent.deltaY > 0){ scrLeft = $(window).scrollLeft() + wheelLength; } else { scrLeft = $(window).scrollLeft() - wheelLength; } $(window).scrollLeft(scrLeft); return false; }); } scrollElm.each(function(){ var self = $(this), areaWidth = self.width(); var innnerHeight = (window.innerHeight || document.documentElement.clientHeight || 0); if(areaWidth > $('body').width()){ $('body').css({width:areaWidth}); } $(window).on('load resize', function(){ $('body').css({height:window.innerHeight}); self.css({height:window.innerHeight}); }); mousewheel(); }); const noWheel = document.querySelector('.js-nowheel'); var scrollPosition; $(document).on('click', '.nav__item','.movie_btn', function() { // ボタンをクリックしたら、クリックしたい要素のdata属性を取得 let target = $(this).data('modal-link'); // 上記で取得した要素と同じclass名を持つ要素を取得 let modal = document.querySelector('.' + target); // その要素にclassを付け替える scrollPosition = $(window).scrollLeft(); $(modal).toggleClass('is-show'); $('body').addClass('fixed').css({'left': -scrollPosition}); $(".modalMovie").attr("src", "assets/movie/special_movie.mov"); $(".modalMovie").attr("src", "assets/movie/special_movie.mov"); noWheel.removeEventListener("click", mousewheel); return false; }); // modalを閉じるときの動作        $('.modal__bg ,.modal_close-btn-area, .modal_close-btn').on('click', function() { $(this).parents('.modal').toggleClass('is-show'); $('body').removeClass('fixed').css({ top: 0 });//背景固定を解除 $(window).scrollLeft(scrollPosition); return false; });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問