スクロールするとき背景が動かないようにしたいです。

Question

スクロールするとき背景が動かないようにしたいです。

ドロワーメニューをスクロールするとき背景が動いてしまい困っています。

下記などを見てみたのですがいまいちやり方がわかりません。
もっと簡単に実装する方法はないのでしょうか？

https://qiita.com/mimoe/items/f5f668cebb697d073553

Comments

[m.ts10806]

ご自身が組まれた、現象の再現するコードをご提示ください。参考先はあくまで参考先であり、あなたが組んだコードとは違うものです。

Answer 1

追記

前提として、リンク先はdrawer.js(http://git.blivesta.com/drawer/)でドロワーメニューを実装していますので
このjQueryを使用していない場合は、リンク先のコードをコピペするだけでは動きません。
質問者さんのコードに合わせて編集する必要がありますが、情報が少ないので現段階では的確な解答もできません。
どのようにドロワーメニューを構築していましたか？
質問者さんの組んだコードをご提示ください。
（こちらへの返信のみでなく、ぜひ質問内容にも追記ください。他の方からも返信がきますよ）

いただいた返信見させていただきましたが、javascriptの記述の方法が違うようです。正しくは下記だと思います。
ですが質問者さんのHTMLの記述もDrower.jsの記法に倣っていませんので、多分下記の通りにしても動きません。

$(function() {

var movefun = function( event ){event.preventDefault();}

$(document).ready(function() {
// ドロワーナビが開いたとき
$('#js-drawermenu-wrap').drawer();
$('#js-drawermenu-wrap').on('js-drawermenu-wrap.opened', function(){
// スクロール停止の処理
window.addEventListener( 'touchmove' , movefun , { passive: false } );
});
// ドロワーナビが閉じたとき
$('#js-drawermenu-wrap').on('js-drawermenu-wrap.closed', function(){
// スクロール停止することを停止する処理
window.removeEventListener( 'touchmove' , movefun, { passive: false } );
});
});
});

Drower.jsの実装については下記ご参考ください。
https://blog.mismithportfolio.com/web/20150320drawer

追記2

おかげさまで固定できたのですが、$('#js-drawermenu-wrap').drawer();のメソッドが存在しない故のエラーが出ます。

おっと、修正が不完全でしたね。下記でお試しください。
一応補足しますと、元は .drawer の部分を #js-drawermenu-wrap に置き換えていたと思います。その変更漏れです。

$(function() {

var movefun = function( event ){event.preventDefault();}

$(document).ready(function() {
// ドロワーナビが開いたとき
$('#js-drawermenu-wrap')#js-drawermenu-wrap();
$('#js-drawermenu-wrap').on('js-drawermenu-wrap.opened', function(){
// スクロール停止の処理
window.addEventListener( 'touchmove' , movefun , { passive: false } );
});
// ドロワーナビが閉じたとき
$('#js-drawermenu-wrap').on('js-drawermenu-wrap.closed', function(){
// スクロール停止することを停止する処理
window.removeEventListener( 'touchmove' , movefun, { passive: false } );
});
});
});

Comments

[退会済みユーザー]

おかげさまで固定できたのですが、$('#js-drawermenu-wrap').drawer();のメソッドが存在しない故のエラーが出ます。

不思議ですが、ちゃんと固定はされています。

解決するにはこのプラグインをすべてのページで読み込ますしかなさそうですね。

Answer 2

情報が少なくて的確な解答は難しいですが
以前の私が困っていた内容と近しい内容なようでしたので、下記の質問と解答参考にしてみてください。
https://teratail.com/questions/135189

質問の方向性が違ったり、わからない事などありましたらまた質問してください。

Comments

[退会済みユーザー]

ご回答ありがとうございます。

ドロワーメニューを出して、下にスクロールしていくとドロワーメニュー自体が下がらないで、
背景が下がってしまう。
よって、背景は動かないようにするという事ですよね。
恐らく同じことです。

[退会済みユーザー]

リンク先を参考にこのように作ってみたのですが、ドロワーメニューが出ここなくなってしまいました。

(function() {

var movefun = function( event ){event.preventDefault();}

$(document).ready(function() {
// ドロワーナビが開いたとき
$('#js-drawermenu-wrap').drawer();
$('#js-drawermenu-wrap').on('drawer.opened', function(){
// スクロール停止の処理
window.addEventListener( 'touchmove' , movefun , { passive: false } );
});
// ドロワーナビが閉じたとき
$('#js-drawermenu-wrap').on('drawer.closed', function(){
// スクロール停止することを停止する処理
window.removeEventListener( 'touchmove' , movefun, { passive: false } );
});
});

})();

[退会済みユーザー]

HTML

<nav id="js-drawermenu-wrap">
<div id="js-drawermenu-button-animation" class="drawermenu">
<ul>
<li class="drawermenu__item">
aa
</li>

</ul>
</div>
</nav>

[退会済みユーザー]

CSSは、横にmarginをマイナス100％にしておいて、ボタンを押すと、プラス100%にして、出現させています。

[退会済みユーザー]

つまり上から落ちてくるのではなく、左から右に出てきます。

[退会済みユーザー]

出来ました。ありがとうございました。