こんにちは、質問をご覧いただき有り難うございます。
お知恵を拝借したく質問させていただきます。
前提・実現したいこと
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; });
あなたの回答
tips
プレビュー