バージョン：2.6.9.8でも再現しました。

●現象

モバイルでサイドバーが表示される。
この時、サイドバーがスクロールできなくなる場合がある。

●原因

サイドバーが表示されている状態で、図矢印の部分をスワイプできる。
この時、背面（メイン）がスクロールする。
図①サイドバーのスクロールバー以外に、図②背面のスクロールバーが表示される。

図②が表示されている時、背面（メイン）がスクロール対象となる為、サイドバーはスクロールしなくなる。
サイドバーを再度タップしすると、図①のみとなり、サイドバーがスクロール対象となる。

●対策

サイドバー表示の時、背面のスクロールを禁止とする？

.body:has(#slide-in-sidebar) {
  overflow-y: hidden;
}

●追加

言われているように、サイドバーを下までスクロールすると、背面がスクロールする場合があり。

このCocoon公式サイトでも、同様に背面がスクロールする事象が発生するようです。
（私が確認した限りでは、メニュー側で発生しました。お問い合わせのサイトでは、確かにサイドバーで発生していました）

モーダルウィンドウの背面がスクロールとなり。
メニューも対象ですね。

上記CSSを止め、メニュー、サイドバーがオンの時、背面(body)をスクロール禁止とします。

.body:has(#navi-menu-input:checked, #sidebar-menu-input:checked) {
  overflow:hidden;
}

●補足

「ハンバーメニュー 背景もスクロールしてしまう」で検索すると、今回の問題、多々出てきます。

cyu-yaさん、mk２さん、ご確認ありがとうございます。cyu-yaさんがご提案くださったコードで試してみましたが、変化がありませんでした・・・。

私の方でもこちらのサイトを実機（iPhone、Andorid共に）で確認しました。メニューとサイドバーどちらも同じ現象が起きましたが、Androidの方が発生の度合いが大きいようです。

追加CSSか、子テーマCSSの最後に、CSSを追加すれば、背面はスクロールしなくなりますが？
ブラウザキャッシュなど削除しました？実際、コード入れた状態でページを確認したく。

＞わいひらさん

本件、個別で対応する話でなく、親テーマでの対応が必要です。

私のサーバー上のテスト環境で、chu-yaさんご提示のものを試しましたが、背面のスクロールはしなくなりました。

>kikichanさん

テーマ側で対応する話かと思いますので、お待ちください。
（少しお時間をいただく感じになると思います）

ありがとうございます。

cyu-yaさんがご提案された下記のコード

.body:has(#navi-menu-input:checked, #sidebar-menu-input:checked) {
  overflow:hidden;
}

で試しましたが、変わりませんでした・・・（添付動画 ※Androidも同じような動きをしました）

今、上のコードを貼ったままにしてますので試していただけます。

又、下記で紹介されている方法も試しました。

https://prankplan.jp/contents/js/noscrol

１の方は変わらずでしたが２の方はiPhoneだけ有効でした。

Androidの方では、下までスクロールすると後ろの画面が以前より勢いよくスクロールするようになってしまいました。

 kikichan さん

確かに言われている通り、実機で確認し気になった点があり。
プラグイン「Pull To Resfresh」使っていませんか？
下へのスワイプが動作し、その時、背面の画面上に「リフレッシュ」と表示され。

プラグイン「Pull To Resfresh」を無効にして確認して貰えますか？

私の端末（Android）で確認すると、以下のような感じかと思います。

背面が、トップ（1番上）の位置にない時は問題なさそうでした。

• サイドバーを表示させ、1番下までスクロール
  その際は、それ以上、下へはスクロールしない
• しかし、上へ移動させようとすると、背面が動いて、リロード動作となるみたいです

書き込みの前に以下の3点をご確認ください。

1. 1つのトピックにつき1つの質問を書き込んでください
2. 不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください
3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

環境情報の取得方法はこちら。
→  https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→  https://wp-cocoon.com/theme-trouble/

PWAプラグインのリフレッシュ機能は使用しています。

以前よりはよくなったという感じでしょうか・・・完全ではないようです。一番下までスクロールすると背景が動いてしまう現象は起きてしまいます。

以下、環境情報です。

----------------------------------------------
サイト名：わんフィール
サイトURL： https://wanfeel.info 
ホームURL： https://wanfeel.info 
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：6.4.2
PHPバージョン：8.1.17
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.0
エンコーディング：none
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.9
カテゴリー数：15
タグ数：3
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：1966バイト
functions.phpサイズ：1413バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：5
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2023/11/wanfeelicon_1024-1.png
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
All-in-One WP Migration 7.79
All-in-One WP Migration Unlimited Extension 2.54
Broken Link Checker 2.2.4
Classic Editor 1.6.3
ConoHa WING コントロールパネルプラグイン 1.2
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 5.8.6
Easy YouTube Gallery 1.0.4
EWWW Image Optimizer 7.2.3
Feedzy RSS Feeds Lite 4.3.5
Flying Scripts 1.2.3
GS Pins for Pinterest Lite 1.8.2
GS Pinterest Portfolio PRO 2.2.0
Ipp Simple Loading 2.2.1
Jetpack 13.0
OneSignal Push Notifications 2.4.2
Promolayer popup builder 1.0.9
Simple Lightbox 2.9.3
Super Progressive Web Apps 2.2.23.1
TinyMCE Templates 4.8.1
VK All in One Expansion Unit 9.94.1.1
WordPress Importer 0.8.2
WP Links Page 4.9.5
----------------------------------------------

----------------------------------------------
サイト名：わんフィール
サイトURL： https://wanfeel.info
ホームURL： https://wanfeel.info
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：6.4.2
PHPバージョン：8.1.17
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.0
エンコーディング：none
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.9
カテゴリー数：15
タグ数：3
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：1966バイト
functions.phpサイズ：1413バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：5
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2023/11/wanfeelicon_1024-1.png
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
All-in-One WP Migration 7.79
All-in-One WP Migration Unlimited Extension 2.54
Broken Link Checker 2.2.4
Classic Editor 1.6.3
ConoHa WING コントロールパネルプラグイン 1.2
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 5.8.6
Easy YouTube Gallery 1.0.4
EWWW Image Optimizer 7.2.3
Feedzy RSS Feeds Lite 4.3.5
Flying Scripts 1.2.3
GS Pins for Pinterest Lite 1.8.2
GS Pinterest Portfolio PRO 2.2.0
Ipp Simple Loading 2.2.1
Jetpack 13.0
OneSignal Push Notifications 2.4.2
Promolayer popup builder 1.0.9
Simple Lightbox 2.9.3
Super Progressive Web Apps 2.2.23.1
TinyMCE Templates 4.8.1
VK All in One Expansion Unit 9.94.1.1
WordPress Importer 0.8.2
WP Links Page 4.9.5
----------------------------------------------

投稿者:: @kikichan

↑

リフレッシュ機能

停止して下さい。

こちらはAndroidで確認した動画です。

cyu-yaさん

動画を送ってますがアップロードできないようです。

Androidで確認しましたが、解決がされておりませんのでリフレッシュを停止しても解決されないと思われます。

リフレッシュをつけた理由としてPWAを公開しており、TWAも今後予定しています。ネイティブアプリなどと違いますのでリフレッシュ機能がないと起動時に最新の情報が読み込まれないため、リフレッシュ機能をつけました。

こちらに↓動画をアップしておきました。

https://72.gigafile.nu/0122-defd21c4d5f92f7aa44e2bfa4f4937113

リンクいただいた動画をリサイズしました。
（画質も落としているので、見づらいかも）

ギリギリのサイズだったみたいで、失敗しました。
（再チャレンジを・・・）

メニューをいっぱい下にスワイプすると、何かのタイミングで背景がイベントを拾っているようです。
サイドバーが動かなくなり。
赤枠の部分を表示している機能、停止できないですか？

先に添付されたページのJSですが、やりたい事はCSSと同じです。

mk2さん、お手数おかけしてすいません。

今一旦リフレッシュ止めてますのでご確認いただけます。

やはり、変わっていません。いただいたCSSコードもつけたままです.

現状では、背面はスクロールしなくなりました。

リロード動作しなくなりました。
（タップ時に丸が表示されているのですが、見づらいかも）

cyu-yaさん、mk２さん

何度かホーム画面に戻ったら正常に動くようになりました。

リフレッシュは諦めるしかなさそうですね。

お二人とも遅い時間までありがとうございました。

わいひらさんが御確認されるまでこのスレッドは、閉じないでおいた方がいいでしょうか？

mk2さん、タップ時に丸ですか・・・

そういった機能はつけていないのですが 🤔 

トピックを閉じる操作は、ユーザーの方にはできないので。
（「解決済」にはできますけれど）

ただ、わいひらさんのご確認は必要かと思いますので、そのままにしておいていただければと思います。

私の方でもiPhoneXrでページ確認しましたが、問題がないように思えます。

●余談

★を追加し、bodyのタッチ操作を無効にしてみる？
リフレッシュをオンにして、以下のtouch-actionを追加して、どうなるか気になりますが。

.body:has(#navi-menu-input:checked, #sidebar-menu-input:checked) {
touch-action: none;★
overflow:hidden;
}

●参考

https://coliss.com/articles/build-websites/operation/css/prevent-scroll-chaining-overscroll-behavior.html

kikichanさん

いえ、私のスマホ上で録画する際に、タップなどの操作したことが分かるように、タップなどした位置に、丸が表示されるようになっているということです。

薄いグレーなので、分かりにくいですけれど。
（Android標準アプリなもので）

原因は、プラグイン「Super Progressive Web Apps」のAddonの以下ということでしょうか。

投稿者:: @chu-ya

↑

★を追加し、bodyのタッチ操作を無効にしてみる？
リフレッシュをオンにして、以下のtouch-actionを追加して、どうなるか気になりますが。

.body:has(#navi-menu-input:checked, #sidebar-menu-input:checked) {
touch-action: none;★
overflow:hidden;
}

上記は、私のローカル環境で確認した感じだと、利かないです。
（リロード動作が発生します）

ご連絡いただきありがとうございます。
chu-yaさんのコードを利用させていただいた対応バージョンをGitHubにアップさせていただきました。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------

mk2さん、ありがとうございます。はい、そのプラグインのaddonを使用していました。

確かにPWAは軽くなるはずなのですが、　重いですね・・・

プラグインを使用しない形でPWA化する事も検討してみます。

わいひらさん、早速のご対応ありがとうございました。

Super Progressive Web Apps は優れたプラグインのため、おかしいなと思い試してみました。

プラグインをインストール後に初めて設定画面を開く時に表示に時間がかかりました。その際、PHP の Notice（警告）が出ていました。2 回目以降は Notice は出ずに表示は速かったです。プラグインに不具合の報告をすれば、すぐに解決してくれる気がします。また、試した限り Notice が出るのは初めて設定画面を開く時だけのため、kikichan さんがプラグインを使い続けるのは問題ないはずです。

プラグインを使わずに PWA を実装される場合は、Microsoft が開発している PWABuilder がおすすめです。すごく簡単に実装できます。

ご対応いただき、ありがとうございます。

サーバー上のテスト環境の親テーマを更新して確認したところ、背面がスクロールすることはなくなりました。

@akira さん、ありがとうございます。

プラグインをインストール後に初めて設定画面を開く時に表示に時間がかかりました。その際、PHP の Notice（警告）が出ていました。

そうでしたか、ご確認ありがとうございます。Super Progressive Web Appsも開発者さんのご対応が早いですよね。

既にどなたか質問してるかもしれないのであとでサポートを確認してみます。

このプラグインのリフレッシュのアドオンをオフにしたら表示が速くなったような気がします。

Lighthouseではこのプラグインに関する警告はないのでこのまま使っていこうかなと考えていたところです。

PWABuilderはTWAもさくっと作ってくれるので今後使用される人がかなり増えるかもしれませんね。

アドバイスと情報、色々ありがとうございました。

@mk2_mk2 

ご確認いただきありがとうございます！