modal-syncerとparallaxを同時に使用時に、モーダルを開いてスクロールすると背景もスクロールしてしまう問題の対処法
これにどんだけ時間をついやしてしまったことか...。
とりあえず解決策を見つけたのでこれから書いていきます。
1.モーダル時のparallaxスクロールを無効化
まじはシンプルにモーダルが開いたことをクラスをつけて教えてあげて、
<script type="text/javascript">
$(document).ready(function(){
$("#modal-movies").mouseenter(function(){
$("body").addClass("modal-open");
}).mouseleave(function(){
$("body").removeClass("modal-open");
});
});
</script>
そのクラスをみつけたら、スクロールが止まるようにfsvs.jsの中のslideDown, slideUPのfunctionのすぐ後に
if ($("body").hasClass("modal-open")) { return false; }
if ($("body").hasClass("modal-closed")) { scrolling = true; }
<||
を追記してあげます。もしかしたらmodal-closedの方はいらないかも。
>||
/**
* [slideDown description]
* @return {[type]} [description]
*/
slideDown : function(e) {
if ($("body").hasClass("modal-open")) { return false; }
if ($("body").hasClass("modal-closed")) { scrolling = true; }
if( app.canSlideDown() ) {
ignoreHashChange = true;
app.slideToIndex( (currentSlideIndex+1), e );
} else {
scrolling = false;
}
},
/**
* [slideUp description]
* @return {[type]} [description]
*/
slideUp : function(e) {
if ($("body").hasClass("modal-open")) { return false; }
if ($("body").hasClass("modal-closed")) { scrolling = true; }
if( app.canSlideUp() ) {
ignoreHashChange = true;
app.slideToIndex( (currentSlideIndex-1), e );
} else {
scrolling = false;
}
},
そうすると、モーダルを開いている時にスクロールしても、背景のparallax部分はスクロールされなくなりました！めでたしめでたし！？
モーダルを閉じた後に、スクロールが復活しない問題を解決する！
めでたしー。かと思ったら、モーダルを閉じた後にスクロールが出来ない状態になっていることが発覚...。いろいろと原因しらべたけど根本的な解決策は見つからず。
どうやったらスクロールが復活するのかいじっていたら、右側のページネーションのボタンをクリックするとまたスクロールができるようになることがわかったので、jsでモーダルが閉じた後にその部分をクリックしたことにさせました。
それがこちら↓↓↓↓
<script type="text/javascript">
$(document).ready(function(){
$("#modal-movies").mouseenter(function(){
$("body").addClass("modal-open");
}).mouseleave(function(){
$("body").removeClass("modal-open");
var e = new jQuery.Event("click");
e.offsetX = 100;
e.offsetY = 100;
$('#fsvs-pagination li.active').trigger(e);
});
});
</script>根本的な解決になってないし、俺と同じケースがどれくらいあるかわからないけどもし誰か困っていたら参考にしてくださいませ。
ーーー
