ドロワーメニュー内のスクロールが出来ない

Question

質問失礼します。

以前もこちらで質問させていたただき質問させていただいた内容は解決しましが、タイトル通りドロワーメニュー内のスクロールが出来ない問題が解決できずに困っております。
ドロワーメニューを表示するとページのトップまで戻ってしまう

恐らくドロワーメニューを開くボタンをクリックした際、htmlにoverflow:hiddenを付与しているのですがそれが原因と考えております。

試したこととしましてはスクロールさせたい要素に(ul)にoverflow:scrollやauto、heightの指定、htmlにではなくbodyにoverflow:hiddenを付与等しましたが効果は見られません。

そもそもhtmlやbodyにoverflow:hiddeをかけているのだからスクロールが出来ないのは当たり前なのでしょうか？
chromeのデベロッパーツールだと動きます。

何か良い解決方法等ご存じの方がいらっしゃいましたらご教授いただけますと幸いです。

よろしくお願いいたします。

Answer 1

お久しぶりです。
スマホ版でスクロールができないのは以下でページ全体に対してスクロール操作を禁止しているからです。

document.addEventListener('touchmove', handleTouchMove, { passive: false });
document.removeEventListener('touchmove', handleTouchMove, { passive: false });

以下のようにすればスクロールしたくない要素だけを指定できます。

const contentsWrapper = document.querySelector('#contentsWrapper');
contentsWrapper.addEventListener('touchmove', handleTouchMove, { passive: false });
contentsWrapper.removeEventListener('touchmove', handleTouchMove, { passive: false });

Comments

[ringoame49]

またまたのお力添えありがとうございます！

検討している場所が違っていましたね。。。。
documentに指定しているのでそりゃそうですよね。。。
しかし、contentsWrapper.addEventListener('touchmove', handleTouchMove, { passive: false });ですが、ナビメニュー表示中はスクロールが効いてしまいます( ﾟДﾟ)

試しにon.clickの外に書けばきちんとスクロールはできませんでしたが、ナビメニューを開くとスクロールできてしまいました( ﾟДﾟ)。。。

ドロワーメニューってややこしいんですね( ﾟДﾟ)

[soliste16]

クリックイベントの中にあるか外にあるかは関係ないはずなのですが・・・。
実際にソースコードを見てみないとどういう状況なのかは分かりかねます。

[ringoame49]

このような感じでやっています。
html
<div id="naviButton">
<div class="menu-trigger naviOpen">
<span></span>
<span></span>
<span></span>
</div>
<p>MENU</p>
</div>

<div id="header">

</div>

<div id="headerMenu">
<ul>
<?php
for($i=1;$i<=40;$i++){
echo '<li>サンプル'.$i.'</li>';
}
?>
</ul>
</div>

<div id="contentsWrapper">
<p id="deviceWidth"></p>
<?php
for($i=1;$i<=100;$i++){
echo $i.'行目<br>';
}
?>
</div>

[ringoame49]

css

.hide {
overflow: hidden;
}

#naviButton {
position: fixed;
top: 0;
right: 0;
width: 40px;
height: 40px;
padding: 10px;
background: orange;
z-index: 20;
}
#naviButton p {
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
font-size: 12px;
font-weight: 700;
text-align: center;
padding: 1px 0 0;
color: #fff;
}

.menu-trigger,
.menu-trigger span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
.menu-trigger {
position: relative;
width: 40px;
height: 26px;
}
.menu-trigger span {
position: absolute;
left: 0;
width: 100%;
height: 3px;
background-color: #fff;
border-radius: 4px;
}

#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
text-align: center;
background: #fff;
border-bottom: 1px solid #f5f5f5;
z-index: 10px;
}

#headerMenu {
display: none;
position: fixed;
top: 60px;
right: 0;
width: 100%;
height: -webkit-calc(100% - 60px);
height: calc(100% - 60px);
background: green;
overflow: scroll;
z-index: 10;
}

#contentsWrapper {
padding: 61px 0 0;
}

[ringoame49]

js

function handleTouchMove(event) {
event.preventDefault();
}
const contentsWrapper = document.querySelector('#contentsWrapper');

$('.menu-trigger').on('click', function(event){
event.preventDefault();
var $this = $(this);
if($this.hasClass('naviOpen')){
$this.addClass('active naviClose');
$this.parent().siblings('#headerMenu').animate( { width: 'show' }, 500);
$this.removeClass('naviOpen');
$('html').addClass('hide,');
contentsWrapper.addEventListener('touchmove', handleTouchMove, { passive: false });
} else if($this.hasClass('naviClose')){
$this.removeClass('active naviClose');
$this.parent().siblings('#headerMenu').animate( { width: 'hide' }, 500);
$this.addClass('naviOpen');
$('html').removeClass('hide');
contentsWrapper.removeEventListener('touchmove', handleTouchMove, { passive: false });
}
});

です！！

[ringoame49]

androidではきちんと動きましたがiosがダメみたいです( ﾟДﾟ)

[soliste16]

なるほど、そういうことなんですね・・・。
そうなると以下のリンク先にあるようにモーダルのスクロール量を計算して、モーダル内でスクロールの端まで来たらpreventDefaultを適用するという方法ぐらいしかないかもしれません。
正直、面倒ですしうまくいくかも分からないです。
ご自身で一度実装されてみて、それでもうまくいかなかったら再度新たに質問されてみてはどうでしょうか。
https://spyweb.media/2017/09/21/modal-window-fixed-background-also-support-ios/

ただし、リンク先の情報は３年前ですので今の段階で確実ではないです。preventDefaultを使うにはaddEventListenerの第３引数にpassive:falseを指定しなければいけませんが、jQueryのonイベントでは非対応なのでjavascriptに書き直さなければいけないですし、その影響でevent.originalEvent.changedTouchesをevent.touchesに変更する必要があったりと、ある程度の改変をしないと実装は厳しいです。スクロールするモーダルの実装はかなり敷居が高いと思います。

[soliste16]

良く考えれば以下で行けるかもしれません。<body></body>の中で#headerMenuを除いたものを<main></main>で囲んだうえで以下のJSを試してみてください。

function handleTouchMove(event) {
event.preventDefault();
}

$('.menu-trigger').on('click', function(event){
event.preventDefault();
var $this = $(this);
if($this.hasClass('naviOpen')){
$this.addClass('active naviClose');
$('#headerMenu').animate( { width: 'show' }, 500);
$this.removeClass('naviOpen');
$('html').addClass('hide');
$('main').addEventListener('touchmove', handleTouchMove, { passive: false });
} else if($this.hasClass('naviClose')){
$this.removeClass('active naviClose');
$('#headerMenu').animate( { width: 'hide' }, 500);
$this.addClass('naviOpen');
$('html').removeClass('hide');
$('main').removeEventListener('touchmove', handleTouchMove, { passive: false });
}
});

[ringoame49]

何度もお付き合いいただきありがとうございます！

お教えいただきました通り下記のようにmainで囲いました。
<main>
<div id="naviButton">
<div class="menu-trigger naviOpen">
<span></span>
<span></span>
<span></span>
</div>
<p>MENU</p>
</div>

<div id="header">
<img id="headerLogo" src="logo.svg">
</div>

<div id="headerMenu">
<ul>
<?php
for($i=1;$i<=40;$i++){
echo '<li>サンプル'.$i.'</li>';
}
?>
</ul>
</div>
</main>

しかしこれだと開閉ボタンをクリックした際、
Uncaught TypeError: $(...).addEventListener is not a function
のエラーが出てスクロールできることに変わりはありませんでした。
そこでmainにid="main"を付けjavascriptを一部変更しました。
const mainCon = document.querySelector('#main');
mainCon.addEventListener('touchmove', handleTouchMove, { passive: false });
mainCon.removeEventListener('touchmove', handleTouchMove, { passive: false });
これでエラーは出なくなりましたが、開閉メニューを開いた際、メニュー自体がスクロールできませんでした。
#mainにtouchmoveを施しているのだから当然と言えば当然なのでしょうか？

モーダルのスクロール量を計算の方を試してみます！！！

[soliste16]

EventListenerを使うのにjQueryも使ってしまったからエラーが出てしまったんですね。直された通りで大丈夫だと思います。

> メニュー自体がスクロールできませんでした。
それはなぜかわかりません。ただし、読み飛ばしてしまっていると思うのですが#headerMenuは<main>内から外してください。そもそもEventListenerを書かなくてもこれをしておけば後ろはスクロールされないのではないかと思います。

[soliste16]

軽くサンプルを作ってみましたけどこれでも駄目でしょうか。
https://codepen.io/soliste16/pen/VwvbKgG

[ringoame49]

すみません。。。
読み間違えてcontentsWrapper以外にmainと読んでいました。

すぐさまお教えいただいた正しいやり方でやりましたが、ダメでした。。。
またお作りいただいたサンプルも同じくcontentsWrapperがスクロールされてしまいます( ;∀;)

[soliste16]

そうですか。やっぱりPC上では上手くいっても厳しいんですね。やはり、先にお伝えした方法しかないかもしれません。なかなかお力になれず申し訳ないです。実装過程で行き詰ったらまた新たに質問をご投稿なさってください。

[ringoame49]

とんでもないです！！！

めちゃくちゃ助かりました！！
ほんとPCもandroidもiosも全部挙動統一してほしいです。。。

また何かありましたらよろしくお願いします！！！