Q&A
.no-scroll の有無の判定をページロード時に1回だけしかおこなっていないのが原因だと思います。
前提
こちらのURLの画面スクロールの禁止を実装したいです
https://designsupply-web.com/knowledgeside/3332/
要望
no-scrollというクラスを付与することによりホイールスクロールが禁止されると認識しているのですが、addClassでクラスを付与しても画面スクロールが禁止されません。
画面スクロールが禁止されるにはどうすればいいか教えていただきたいです。
また、再度スクロールを解除する方法も教えていただきたいです。
補足
inviewを使用し、画面内に.scrollクラスが入ると画面スクロールが禁止される機能を作っています。
html
1<body> 2 3 <p>文章1</p> 4 <p>文章2</p> 5 <p>文章3</p> 6 <div class="scroll"> 7 <p>文章4</p> 8 </div> 9 10 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 11 <script src="script.js"></script> 12 <script type="text/javascript" src="jquery.inview-master/jquery.inview.js"></script> 13 14</body> 15
jQuery
1 2 3// PCでマウスホイールでのスクロール操作の制御 4$(function(){ 5 $(window).on('wheel',function(e){ 6 if($(".no-scroll").length) { 7 e.preventDefault(); 8 } 9 }); 10}); 11 12 13// モバイル端末でのタッチスクロール操作の制御 14$(function(){ 15$(window).on('touchmove.noScroll',function(e){ 16 if($(".no-scroll").length) { 17 e.preventDefault(); 18 } 19 }); 20}); 21 22 23/*画面内に入ると.no-scrollクラス付与*/ 24 25$(function() { 26$('.scroll').on('inview', function(event, isInView){ 27 if (isInView ) { 28 $('.scroll').addClass(".no-scroll"); 29 } 30 31 }); 32}); 33 34
ご回答ありがとうございます。
原因はわかりました！
なにぶん初心者な者でして、解決方法も合わせて教えていただけませんでしょうか。
よろしければ記述の仕方なども含めて教えていただけますと幸いです。
回答2件
0
ベストアンサー
js
1$(function(){ 2 $(window).on('wheel',function(e){ 3 if($(".no-scroll").length) { 4 e.preventDefault(); 5 } 6 }); 7});
のように、.no-scroll の有無の判定を毎回すればいいかと思いますね。
投稿2019/04/30 05:08
総合スコア36104
記述のご回答ありがとうございます。
jQuery内の記述をご指摘いただいた内容に変更しましたが、画面スクロールの禁止は行われませんでした。
もし私の書き方が間違っていたらご指摘お願いいたします。
// モバイル端末でのタッチスクロール操作の制御
の方が変更されていないように見えますが、そちらのコードではきちんと書き換わっていますか？
今、"// モバイル端末でのタッチスクロール操作の制御"を上記のものに書き換えました。
まだスクロール禁止はされません。
もし修正の書き方など間違っていましたらご指摘をお願いいたします。
$('.scroll').addClass(".no-scroll");
にtypoがありますね。ドットが余計です。
解決しました！
長々とお付き合いいただきありがとうございました！
あなたの回答
tips
プレビュー
