ドロワーメニューを表示するとページのトップまで戻ってしまう

自分では一向に解決ができないので質問させていただきます。

スマホ用のデザインでドロワーメニューを作っています。
fixdeで固定された画面右上のメニューブロック(naviOpen)をクリックで隠れたheaderNaviを表示させています。
しかし画面をスクロール後naviOpenをクリックするとページTOPまで戻ってしまいます。
トップまで戻ってしまうのを避ける方法としてnaviOpenをクリックした際のスクロール値をjavaScriptで記憶し、headerNaviを閉じる際に同じだけスクロールして元の位置に戻す方法があるみたいですが、それだとnaviOpenをクリックした際にページTOPまで動いたのが見えてしまうのであまり実装したくないです。
なので上記以外の方法でnaviOpenをクリックした際にページTOPまで戻らないようにする方法はありますでしょうか？

以下のように作っています。

HTML

<!DOCTYPE html>
<html dir="ltr" lang="ja">
<head>
	<meta charset="utf-8">
    <meta name=”robots” content=”noindex,nofollow“>
	 <meta name="viewport" content="width=750">
	<link rel="stylesheet" type="text/css" href="teststyle.css">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script type="text/javascript" src="testscript.js"></script>
	<title><?php echo $page_title; ?></title>
</head>
<body>


<div id="naviOpen">
    MENU
</div>

<nav id="headerNavi">
    <div id="naviClose">閉じる</div>
    <ul id="mainMenu">
        <li><a href="">AAAAAAA</a></li>
   		<li><a href="">AAAAAAA</a></li>
		<li><a href="">AAAAAAA</a></li>
		<li><a href="">AAAAAAA</a></li>
		<li><a href="">AAAAAAA</a></li>
		<li><a href="">AAAAAAA</a></li>
        <li><a href="">AAAAAAA</a></li>
    </ul>
</nav>

<div id="mainHeader">

</div>

<div id="contentsWrapper">
 	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
	<p> 固定されたヘッダの下全てを囲むブロック</p>
</div>

	
</body>
</html>

CSS

*{
    margin :0px;
    padding: 0px;
}

html,
body,
p,
dl, dt, dd {
	padding: 0;
	margin: 0;
	word-wrap: break-word;
}
body {
    width: 750px;
    min-width: 750px;
}
#contentsWrapper {
    margin-top: 150px;
    width: 750px;
    min-width: 750px;
    -webkit-overflow-scrolling: touch;
}
#mainHeader {
    position: fixed;
	top: 0;
	left: 0;
    width: 100%;
    min-width: 750px;
    height: 150px;
	background: #505050;
}
#headerNavi {
    display: none;
    position: fixed;
    width: 750px;
    top: 0;
	right: 0;
    overflow-y: scroll;
    z-index: 2;
	background: red;
}
#headerNavi ul {
    width: 750px;
}
#naviOpen {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    z-index: 1;
	background: #cdcdcd;

}    
.hide {
    overflow: hidden;
}
}

JavaScript

$(function(){
	
	windowWidth = window.innerWidth;
	contentsWrapper = $('#contentsWrapper');
	
	var screenHeight = window.innerHeight;
	var UnderFixdeHeight = parseInt(screenHeight) - 150;
	contentsWrapper.css('height', UnderFixdeHeight);
	$('#headerNavi').css('height', screenHeight);

	$('#naviOpen').on('click', function() {
		$(this).next().animate( { width: 'show' }, 500);
		contentsWrapper.addClass('hide');
	} );
	$('#naviClose') .on('click', function() {
		$(this).parent().animate( { width: 'hide' }, 500);
		contentsWrapper.removeClass('hide');
	} );

});

全く解決できないので是非ご教授いただけますと幸いです。
よろしくお願いいたします。

soliste16

2020/03/15 15:50

以上のスクリプトでは現象を再現できません。再現可能なソースコードの提出をお勧めします。

ringoame49

2020/03/15 16:16

ご指摘ありがとうございます。事象が起きるソースコードに編集しました。

行動規範の内容に同意します

回答1件

ベストアンサー

overflow:hiddenはhtmlタグにつけてください。これで上までスクロールされなくなります。

javascript
1$('html').addClass('hide');

　　
追記
恐らくは、スクロールを防ぐために#contentsWrapperの高さを決めてoverflowを適用なさったのだと思われますが、これにより上部からscreenHeight-150pxのところでdivが打ち切られて強制的に上にスクロールされてしまっていました。
しかし、bodyまたはhtmlにoverflowを適用させると意味合いが異なってきます。これらの要素に適用されたoverflowプロパティの値は、ビューポートへと適用されます。ビューポートとは、ブラウザのウインドウに表示されている領域のことで、ここにoverflow:hiddenが適用されることにより、html要素内に存在する内容は、ビューポートのサイズに合わせて切り取られ、スクロールバーが表示されなくなります。

参考
https://www.w3.org/TR/CSS22/visufx.html#propdef-overflow

投稿2020/03/15 16:57

編集2020/03/15 17:29

soliste16

総合スコア757

ringoame49

2020/03/15 17:36

ご解答ありがとうございます！ $('html').addClass('hide')だとheaderNaviが開いている時、contentsWrapperのスクロールが効いてしまします。

ringoame49

2020/03/15 18:26 編集

＞恐らくは、スクロールを防ぐために#contentsWrapperの高さを決めてoverflowを適用なさったのだと思われますが、まさにその通りです。また更に一番したまでスクロールが到達した時headerNaviが閉じてしまいます。(safari)

soliste16

2020/03/15 21:29

「スマホ用のデザインで」という所を読み飛ばしていました。スマホの場合はこれだけではスクロールできてしまうので他に以下のような対処が必要です。 https://qiita.com/shge/items/d2ae44621ce2eec183e6

ringoame49

2020/03/16 00:14

ありがとうございます！今から出ないといけないので戻り次第キチンと目を通してコメントさせていただきます！

ringoame49

2020/03/16 14:26

遅くなりました。お教えいただきましたページを拝見しましたがいまいち理解回できずスクロールを止めることが出来ませんでした。。。当方の解釈としてはtouchmoveのイベントが発生した時にpreventDefaultとpassive: falseでスクロールを発生させないようにできると解釈していますが書き方がいまいちわからないです。そもそもこの解釈はあっているのでしょうか？参考ページの記載通りにcssにはhtml, body{overflow: hidden;}を記述　←これを記載するとそもそもページが開いた瞬間からが出来ない jsにはdocument.addEventListener('touchmove', function(e) {e.preventDefault();}, {passive: false});を記述　これもページが開いた瞬間からスクロールが出来ない。上記の書き方だとスクロールが出来なくなる理屈は理解できているつもりです。

soliste16

2020/03/16 14:40

$('#naviOpen').on('click', function() { } ); $('#naviClose') .on('click', function() { } ); 一応確認ですがそれぞれこの処理の中に書いていますか。ここに書いていればそのようなことは起こらないはずなのですが。また、touch-action: none;が使えるブラウザも増えているのでこちらも試してみてはいかがでしょうか。

soliste16

2020/03/16 14:47

$('#naviOpen').on('click', function() { $(this).next().animate( { width: 'show' }, 500); $('html').addClass('hide'); document.addEventListener('touchmove', handleTouchMove, { passive: false }); } ); $('#naviClose') .on('click', function() { $(this).parent().animate( { width: 'hide' }, 500); $('html').removeClass('hide'); document.removeEventListener('touchmove', handleTouchMove, { passive: false }); } ); function handleTouchMove(event) { event.preventDefault(); } こんな感じでしょうか。

ringoame49

2020/03/16 15:10

なんどもありがとうございます。 $('#naviOpen').on('click', function() { } ); $('#naviClose') .on('click', function() { } ); の中に直接書いていましたがdocument.addEventListener('touchmove', function(e) {e.preventDefault();}, {passive: false});とそのそのまま書いておりました。 touch-action: none;はSafari はまだ対応していません。と書かれていたのでスルーしていました。もし書くとすればcssのhideにoverflow:hiddenの代わりにtouch-action: none;を書けばいいのでしょうか？ $('#naviOpen').on('click'でhideクラスの与えられたものにtouch-action: none;が付与される形ですかね？ Safari以外なら動くならだれかのandroid借りて試してみます！今回のトラブルは今までで一番解決んまでに悩んでとても時間がかかっていたので本当に助かりました。本当に本当にありがとうございました。

soliste16

2020/03/16 15:22

https://developer.mozilla.org/ja/docs/Web/CSS/touch-action 一応すべてのブラウザで完全対応と書いてありますのでsafariでも機能すると思います。これはタッチイベントの全面的な禁止を行うだけで、PCでのスクロール操作には効果がありません。よって、使用する場合はaddEventListenerの代わりとして使用し、overflow:hiddenはそのまま記述しておいてください。ただ、あくまでも最新のブラウザには対応しているということなので、今のところはあまり用いない方がよいかもしれません。 removeEventListenerでは function(e) {e.preventDefault();}といったような無名関数は使用できませんので上記のように関数を用意する必要があります。（add~の方では無名関数も使えます。）参考：https://pisuke-code.com/js-not-work-removeeventlistener/ ひとまず問題が直って良かったです。

ringoame49

2020/03/16 15:52

全てのブラウザに対応しているんですね！無名関数等についても今一度勉強しなおしてみます！参考先のURLまでありがとうございます！本当に助かりました。また機会がありましたらよろしくお願いいたします！

行動規範の内容に同意します